vue父子组件间通信

父组件向子组件通信

原理： 父组件data中存在一属性，子组件通过props接收，父组件动态绑定该数据。

子组件代码：

<template>
<div class="child">
    <button>减一</button>   {{number}}    <button>加一</button>
</div>
</template>
<script>
export default {
prop:['number'] //接收的数据，当存在props时，子组件将不再读取自己data中的number数据。
    data (){
        return {
            number:12
        }
    }
}
</script>
<style scoped>
.child {
    color: red;
}
</style>

父组件代码：

<template>
     <v-child v-bind:number="number"></v-child>   //引用子组件，动态绑定数据
  </div>
</template>
<script>
import son from './components/child.vue';  //首先导入子组件
export default {
  name: 'App',
  components: {
    'v-child': son  //定义子组件名称
  },
  data () {
    return {
      number:123  //需要传递的数据。
     }
    }
  }

子组件向父组件通信

原理：
子组件通过this.$emit(‘方法名’，‘参数’)传递，
父组件通过 v-on:方法名=“function()”来接收。

子组件代码：

<template>
<div class="child">
    <button v-on:click="increase">减一</button>   {{number}}    <button>加一</button>
</div>
</template>
<script>
export default {
props:['number'],
    data (){
        return {
            numbers:12
        }
    },
    methods: {
        increase () {
            this.$emit('incre',1);   //通过该方法与父组件通信
        }
    }
}
</script>
<style scoped>
.child {
    color: red;
}

父组件代码：

 <v-child v-bind:number="number" v-on:incre="jian"></v-child>
 
  methods: {
    jian(){
      this.number--
      }
    }

逻辑就是：子组件点击按钮触发increase函数，然后执行该函数通过$emit()方法定义jian（）传递出去，父组件通过v-on方法检测到jian()并执行。导致父组件number变化，相应的子组件number也跟着变化。