父组件向子组件通信
原理： 父组件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也跟着变化。