Vue实现组件props双向绑定解决方案

注意：子组件不能直接修改prop过来的数据，会报错

方案一：

用data对象中创建一个props属性的副本
watch props属性赋予data副本来同步组件外对props的修改
watch data副本，emit一个函数通知到组件外

HelloWorld组件代码如下：（代码里面有相应的注释）

<template><div class="hello"><h1 v-show="visible">测试显示隐藏</h1><div @click="cancel">点我点我</div></div>
</template><script>
export default {name: 'HelloWorld',props: {value: {type: Boolean,default:false}},data () {return {visible: false}},watch:{value(val) {this.visible = val;},// 只有这一步 才触发父组件的方法 由父组件的 paretnVisibleChange 方法去改变父组件的数据visible(val) { this.$emit("paretnVisibleChange",val); } },// 子组件修改的只能是子组件 本身的data数据methods:{cancel(){this.visible = !this.visible;}},
// 注意这段代码 为了同步父组件的数据mounted() {if (this.value) {this.visible = true;}}
}
</script>
<style scoped></style>

父组件代码如下：

<template><div id="app"><HelloWorld :value = 'visible' @paretnVisibleChange="visibleChange" /></div>
</template><script>
import HelloWorld from './components/HelloWorld'export default {name: 'App',components: {HelloWorld},data () {return {visible: true}},methods:{// 父子组件就是靠的这个方法改变数据的visibleChange(val){this.visible = val;}}
}
</script>

方案一的缺点就是父组件必须有个 visibleChange 这样的方法，有点累赘。

这时候想到了 v-model

因为

<input v-model = 'someThing'>

是下面这段代码的语法糖

<input :value = 'someThing'  @input = 'someThing = $event.target.value'>

也就是说 v-mode 自带了一个改变父组件的方法类似方案一的 paretnVisibleChange

但是使用 v-model 的时候需要注意两点：

1. 子组件要接受 value 属性

2. value改变时要触发input 事件

方案二：

HelloWorld 子组件的代码如下;

  <div class="hello"><h1 v-show="visible">测试显示隐藏</h1><div @click="cancel">点我点我</div></div>
</template><script>
export default {name: 'HelloWorld',props: {value: {type: Boolean,default:true}},data () {return {visible: false}},watch:{value(val) {this.visible = val;},// 子组件 改变的就是这段代码visible(val) {this.$emit("input",val);}},methods:{cancel(){this.visible = !this.visible;}},mounted() {if (this.value) {this.visible = true;}}
}
</script>

父组件代码如下：（父组件省去了 paretnVisibleChange 方法）

<template><div id="app"><HelloWorld v-mode = 'visible'/></div>
</template><script>
import HelloWorld from './components/HelloWorld'export default {name: 'App',components: {HelloWorld},data () {return {visible: true}}
}
</script>

方案三：

vue 2.3.0之后新增了 .sync 属性使用方法跟 v-model 类似具体请参考： https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-修饰符

下面我写了一个简单的sync 的使用实例：

父组件的代码如下：

<liis="DragCompent"v-for="(item, index) in layoutItem":item="item"v-model="cloneLeftItemText":leftDragItemIsDraged.sync = 'leftDragItemIsDraged':key="index"></li>

子组件的代码如下：

props: {leftDragItemIsDraged: {type: Boolean,default: false}},
watch:{leftDragItemIsDraged(val) {this.thisLeftDragItemIsDraged = val;
},
thisLeftDragItemIsDraged(val){this.$emit('update:leftDragItemIsDraged', val)
}
}

效果如下：

Vue实现组件props双向绑定解决方案相关推荐

Vue2 利用 v-model 实现组件props双向绑定的优美解决方案
在项目中开始使用vue2来构建项目了,跟 vue1 很大的一处不同在于2 取消了props 的双向绑定,改成只能从父级传到子级的单向数据流,初衷当然是好的,为了避免双向绑定在项目中容易造成的数据混乱. ...
vue 自定义组件 v-model双向绑定、父子组件同步通信
父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx ...
vue自定义组件实现双向绑定
场景: 我们比较常用的父子组件之间的交互方式: 父组件通过props将数据流入到子组件: 子组件通过$emit将更新后的数组发送的父组件: 今天,我们通过另一种方式实现交互,参考input框的v-mo ...
【笔记】vue父子组件数据双向绑定（v-model、prop.aync）
文章目录一.v-model 1.最简写法 2.可自定义属性名的写法(2.2.0+) 3.多绑二..sync [自定义组件的 v-model - Vue.js 中文文档]:(https://vuej ...
vue自定义组件数据双向绑定，获取vue自定义组件input框输入的值
1.首先创建一个自定义组件 Vue.component('test-component',{template:`<div id="el"><input @inpu ...
vue 父子组件传值双向绑定
父组件: <template> //:content , @content 中的:@一个是v-bind 一个是v-on的写法. //:content="detail" ...
【Vue】—数据的双向绑定v-model
[Vue]-数据的双向绑定v-model
15 Vue中子组件样式的绑定和行内样式模版编写
[基础]模板样式绑定2-进阶场景子组件的样式绑定如何区分父子组件子组件使用样式的小坑行内样式的编写场景这篇文章继续学习Vue的模板样式绑定.上篇文章你已经对Vue中的样式绑定有一个基本了 ...
Vue之数据的双向绑定
在vue中实现数据双向绑定的核心在于v-model 示例: <input type="text" name=" " v-model="userN ...

Vue实现组件props双向绑定解决方案

Vue实现组件props双向绑定解决方案相关推荐

最新文章

热门文章