vue2父子组件通信一般有3种方式
1、props+自定义事件
2、props+sync修饰符
3、props+v-model
因为第一种方式，还需要在父组件methods中声明方法去改变值，显得比较麻烦。
所以推荐使用第二种或者第三种方式。
如果是改变多个值就使用第二种方法，如果只是改变一个值那么就使用第三种方法。
方法一：props+自定义事件
父组件 Demo
<div id="demo">
<input type="text" v-model="name">
<!--子组件传递过来的参数由自定义事件绑定的方法接收-->
<demo-child :nameFather="name" @newData="newName"></demo-child>
</div>
import DemoChild from '@/components/DemoChild'
export default {
data(){
return {
name:'nihao'
}
},
components:{
DemoChild
},
methods:{
//因此参数value是 '这是子组件传递过来的数据'
newName(value){
this.name=value
}
}
}
子组件 DemoChild
<template>
<div id="demo_child">
<p @click="change">DemoChild组件：{{nameFather}}</p>
</div>
</template>
export default {
//接收属性nameFather
props:{
nameFather: String
},
methods:{
change(){
//触发父组件中的自定义事件newData , this.$emit（'需要触发的自定义事件' [,'需要传递的参数']）
this.$emit('newData','这是子组件传递过来的数据')
}
}
}
方法二：props+sync修饰符
父组件 Demo
<div id="demo">
<input type="text" v-model="name">
<demo-child :nameFather.sync="name"></demo-child>
</div>
import DemoChild from '@/components/DemoChild'
export default {
data(){
return {
name:'nihao'
}
},
components:{
DemoChild
}
}
是子组件 DemoChild
<div id="demo_child">
<p @click="change">DemoChild组件：{{nameFather}}</p>
</div>
export default {
props:{
nameFather: String
},
methods:{
change(){
//触发父组件自定义属性nameFather的更新，this.$emit（'update:父组件需要更新的自定义属性'，'更新后的属性值'）
this.$emit('update:nameFather','这是子组件传递过来的数据')
}
}
}
方法三：props + v-model
父组件 Demo
<div id="demo">
<input type="text" v-model="name">
<demo-child v-model="name"></demo-child>
</div>
import DemoChild from '@/components/DemoChild'
export default {
data(){
return {
name:'nihao'
}
},
components:{
DemoChild
}
}
子组件 DemoChild
<div id="demo_child">
<p @click="change"> DemoChild组件 {{nameFather}}</p>
</div>
export default {
//声明model
model:{
prop:'nameFather', //这个prop的值就是自定义的props属性,所以这里是'nameFather'
event:'modelChange' //model绑定的事件名，自己随意取
},
props:{
nameFather: String //自定义props属性，nameFather
},
methods:{
change(){
//这里的第一个参数是model里的event,所以这里是'modelChange' 第二个参数是传递过去的值
this.$emit('modelChange','这是子组件传递过去的数据')
}
}
}
