如何在vue中实现父子通信

1.需要用到的组件

父组件

<template><div id="app"><BaseCount :count="count" @changeCount="cahngeCount"></BaseCount></div>
</template><script>
import BaseCount from './components/BaseCount.vue';export default {components:{BaseCount},data(){return{count:100}},methods:{cahngeCount(value){this.count = value}}
}
</script><style></style>

子组件

<template><div class="base-count"><button @click="sub">-</button><span>{{ count }}</span><button @click="add">+</button></div>
</template><script>
export default {// 1.自己的数据随便修改  （谁的数据 谁负责）// data () {//   return {//     count: 100,//   }// },// 2.外部传过来的数据 不能随便修改// 第一种方式// props:['count'] // 第二种方式// props:{//   count:Number // },// 第三种方式props:{count:{type:Number, // 类型require:true, // 是否必填default:0, // 默认值validator(vlaue){if(vlaue) // 自定义函数 false 不通过 true 通过return true}}},methods:{sub(){this.$emit('changeCount',this.count - 1)},add(){this.$emit('changeCount',this.count + 1)}}}
</script><style>
.base-count {margin: 20px;
}
</style>

2.父传子，通过props

1.在父组件中注册子组件，并使用

2. 在子组件中得到父组件的传递值

3. 在子组件中收集数据并使用

4. 注意点

1.收集数据时，v-bind绑定的属性值，应该与props中的键值对中的键相同
2. props中有3种数据收集方式，使用时需注意

2. 子传父，通过this.$emit

1.通过点击事件绑定函数

2. 对函数进行处理

3. 对子组件的传递的事件进行监听并用函数处理

4. 注意点

1.使用this.$emit时传递的事件名，必须要与在父组件中使用的事件名一致
2. 在在子组件中不能改变父组件传递来的值，如果要修改，请通过父组件修改，使数据单向流动