父組件
<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>
給組件傳遞一份數(shù)據(jù)時，并且要實現(xiàn)雙向綁定绑蔫，可以使用v-model實現(xiàn)
接收的屬性是value
自定義的事件名是input
props:['value']
一個組件只能有一個屬性叫value
@updateName='name=$event'
給組件傳遞多份數(shù)據(jù)時，并且要實現(xiàn)雙向綁定携添，.sync修飾符實現(xiàn)
this.$emit('input',value)
回傳事件必須是update：屬性名
.sync.png
$event.target.value是獲取當(dāng)前文本框的值
v-on:input="name=$event.target.value"
