父组件
<template>
<div class="num">
{{name}}{{age}}{{sex}}
<Num2 :name="name" @updateName="updateName" :age.sync="age" v-model="sex"></Num2>
</div>
</template>
<script>
import Num2 from '../pages/Num2.vue'
export default {
name:'Num1',
components:{
Num2
},
data() {
return {
name:'张三',
age:1,
sex:'男'
}
},
methods: {
updateName(val){
this.name=val
},
},
}
</script>
子组件
<template>
<div class="num">
{{name}}
<button @click="updateName">修改姓名</button>
<input type="text" v-model="myage">
{{myage}}
<hr>
{{value}}
<button @click="updateSex">点击修改</button>
</div>
</template>
<script>
export default {
name:'Num2',
props:['name','age','value'],
methods: {
updateName(){
this.$emit('updateName','王五')
},
updateSex(){
this.$emit('input','女')
}
},
watch:{
myage:{
immediate:true,
handler(nval){
console.log(nval)
this.myage=nval
this.$emit('update:age',this.myage)
}
}
},
data() {
return {
myage:this.age
}
},
}
</script>
给组件传递一份数据时，并且要实现双向绑定，可以使用v-model实现
接收的属性是value
自定义的事件名是input
props:['value']
一个组件只能有一个属性叫value
@updateName='name=$event'
给组件传递多份数据时，并且要实现双向绑定，.sync修饰符实现
this.$emit('input',value)
回传事件必须是update：属性名
.sync.png
$event.target.value是获取当前文本框的值
v-on:input="name=$event.target.value"
