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>