前面写了一篇文章总结了vue组件通讯的方式,但是在双向绑定上面没有讲解透彻,最近重新梳理了一波,所以准备重新立贴为记!
子组件 Child.vue
<template>
<div>
下面是子组件中的按钮
<button @click="changeName">{{_name}}</button>
</div>
</template>
<script>
export default {
name: "Child",
// model 如果不写默认为value
model: {
prop: 'name',// 指定父组件中v-model绑定到子组件上的属性名
event: 'update:name',// 指定子组件中属性发生改变的时候,触发父组件什么方法
},
computed: {
// 通过计算属性达到访问父组件值和修改父组件值的目的
_name: {
get() {
return this.name
},
set(newVal, oldVal) {
// 通过发射修改父组件的值
this.$emit('update:name', newVal)
}
}
},
props: {
// 提供给父组件绑定的属性
name: {
type: String,
default: function () {
return ''
}
}
},
methods:{
changeName(){
// 注意此处不能直接设置this.name 而应该通过计算属性中的_name去修改父组件的值
this._name = '子组件'
}
}
}
</script>
<style scoped>
</style>
父组件
当属性只有一个的时候可以使用v-model绑定
<template>
<div>
父组件中的值:{{name}}
<Child v-model="name"></Child>
</div>
</template>
<script>
import Child from './Child'
export default {
name: "Parent",
components: {Child},
data() {
return {
name: '父组件'
}
}
}
</script>
<style scoped>
</style>
当属性有多个的时候需要使用.sync绑定
<template>
<div>
父组件中的值:{{name}}
<!-- <Child v-model="name"></Child> 单个属性使用v-model -->
<Child :name.sync="name"></Child>
</div>
</template>
<script>
import Child from './Child'
export default {
name: "Parent",
components: {Child},
data() {
return {
name: '父组件'
}
}
}
</script>
<style scoped>
</style>
效果图
点击按钮之后
总结
双向绑定的本质还是通过$emit发射方法到父组件,通过父组件去修改父组件内的值,而不是直接在子组件中直接修改父组件的值
建议
子组件中不要直接使用父组件中的属性,应该通过计算属性来实现属性的调用