vue 父子组件数据的双向绑定大法

官方文档说明

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定
父级 prop 的更新会向下流动到子组件中，但是反过来则不行
2.3.0+ 新增 .sync 修饰符
以 update:my-prop-name 的模式触发事件实现上行绑定最终实现双向绑定
举个栗子
this.$emit('update:title', newTitle)

代码实现

child.vue

<template>

  <div>

      <input type="text" v-model="sonValue">

      <div>{{ fatherValue }}</div>

  </div>

</template>

<script>

export default {

  props: {

    fatherValue: {

      required: true

    }

  },

  data () {

    return {

      sonValue: this.fatherValue

    }

  },

  watch: {

    sonValue (newValue, oldvalue) {

      this.$emit('update:fatherValue', newValue)

    },

    fatherValue (newValue) {

      this.sonValue = newValue

    }

  }

}

</script>

father.vue

<template>

  <div class="hello">

    <!-- input实时改变value的值, 并且会实时改变child里的内容 -->

    <input type="text" v-model="value">

    <child :fatherValue.sync="value" ></child>

  </div>

</template>

<script>

import Child from './Child'  //引入Child子组件

export default {

  data() {

    return {

      value: ''

    }

  },

  components: {

    'child': Child

  }

}

</script>

巴特西

vue 父子组件数据的双向绑定大法

官方文档说明

代码实现

最新文章

热门文章