Vue父子组件双向数据绑定

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

[本文出自天外归云的博客园]

简介

Vue版本：2.9.6

Element版本：2.4.8

问题描述：子组件对Element中el-select进行封装，父组件中把选中的值selected和所有选项options传给子组件，当子组件中选中的option发生改变时，通知父组件并更新父组件中的selected值

问题本质：在子组件中接收父组件中传递过来的值A，当值A在子组件中发生改变，通知父组件并在父组件中更新值A

代码

1. 父组件中引入并调用子组件，传给子组件fatherSelected和fatherOptions两个变量值，内容如下：

<template>
<div>
<SelectOption :selected.sync="fatherSelected"
:options="fatherOptions"></SelectOption>
</div>
</template><script>
import { SelectOption } from '@/components/common'export default {
name: 'Father',
data () {
return {
fatherOptions: [{'label': 'lab1', 'value': 'val1', 'id':'id1'}, {'label': 'lab2', 'value': 'val2', 'id':'id2'}],
fatherSelected: ''
}
}
}
</script>

2. 路径'@/components/common'下创建一个index.js文件导出子组件，内容如下：

export { default as SelectOption } from './SelectOption'

3. 子组件，用props定义从父组件接收传参的变量selected和options，内容如下：

<template>
<div class="selectOption">
<el-select v-model="mySelected"
filterable
@change="changeSelected">
<el-option v-for="option in options"
:key="option.id"
:label="option.label"
:value="option.value">
</el-option>
</el-select>
</div>
</template>
<style>
.selectOption {
margin-top: 30px;
}
</style>
<script>
export default {
props: ['selected', 'options'],
data: function () {
return {
mySelected: this.selected
}
},
methods: {
changeSelected: function () {
this.$emit('update:selected', this.mySelected)
}
}
}
</script>