Vue父子组件双向数据绑定
Posted lantianyou
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>
注意事项
1. 子组件中接收父组件的值selected后,一定要保存到子组件作用域中的一个变量mySelected中
2. 当mySelected的值发生改变,@change监听会触发函数changeSelected执行
3. 通过thie.$emit来通知父组件进行update入参selected的值,对应更新父组件中的fatherSelected变量值
4. 对于允许子组件通知并进行改变的值fatherSelected一定要加 ".sync" 处理
以上是关于Vue父子组件双向数据绑定的主要内容,如果未能解决你的问题,请参考以下文章