Vue自定义子组件与父组件数据双向绑定

Vue自定义子组件利用model与父组件进行数据双向绑定

官方教程传送门

父组件代码

• 父组件直接使用v-model对需要双向绑定的数据进行绑定

<template>
  <div>
    父组件内容：{{faData}}
    <hr />
    <components-a v-model="faData"></components-a>
  </div>
</template>

<script>
import ComponentsA from '@/components/ComponentsA/ComponentsA'
export default {
  name: 'Father',
  components: {
    'components-a': ComponentsA
  },
  data() {
    return {
      faData: '我是父组件原本的值'
    }
  }
}
</script>

子组件代码

• 子组件使用props接收父组件v-model绑定的数据
• 利用model中的prop接收props内数据，利用event自定义事件

<template>
  <div>
    <input type="text" v-model="inputVal" />
    <button @click="dataChange">点击改变内容</button>
  </div>
</template>

<script>
export default {
  name: 'Children',
  model: {
    prop: 'faData', //接收props内值
    event: 'changeData' //自定义事件名
  },
  props: {
    faData: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      inputVal: ''
    }
  },
  methods: {
    dataChange() {
      this.$emit('changeData', this.inputVal)
    }
  }
}
</script>