vue-自定义组件之数据双向绑定

前面写了一篇文章总结了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发射方法到父组件，通过父组件去修改父组件内的值，而不是直接在子组件中直接修改父组件的值

建议

子组件中不要直接使用父组件中的属性，应该通过计算属性来实现属性的调用