vue实现父子双向通信

来源：互联网发布：峡山网店美工培训编辑：程序博客网时间：2024/06/14 09:03

父组件通过props向子组件传递数据
子组件用emit向父组件传递数据

父子组件同时操作同一个数，进行加运算与减运算

子组件 counter.vue

<template>    <div>        <button v-on:click=increament>+</button>        <button @click=decreament>-</button>        <p>{{num}}</p>    </div></template><script>    export default {        props: ["num"],        methods: {            increament: function() {                this.$emit("incre");            },            decreament: function() {                this.$emit("decre");            }        }    }</script>

父组件

<template>  <div class="hello">    <counter v-bind:num ="num" v-on:incre="increment" v-on:decre = "decrement"></counter>    <p>parent:{{num}}</p>  </div></template><script>    import counter from "./counter"export default {  name: 'hello',  data () {    return {        num:10    }  },  components:{    counter  },  methods:{    increment:function(){        this.num ++;    },    decrement:function(){        this.num --;    }  }}</script>

阅读全文

0 0