实现组件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 子组件的代码如下;

<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: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 的使用实例:
父组件的代码如下:

<li
is="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)
}
}

效果如下:
实现组件props双向绑定解决方案的更多相关文章
- Vue实现组件props双向绑定解决方案
注意: 子组件不能直接修改prop过来的数据,会报错 方案一: 用data对象中创建一个props属性的副本 watch props属性 赋予data副本 来同步组件外对props的修改 watch ...
- 如何在Vue2中实现组件props双向绑定
Vue学习笔记-3 前言 Vue 2.x相比较Vue 1.x而言,升级变化除了实现了Virtual-Dom以外,给使用者最大不适就是移除的组件的props的双向绑定功能. 以往在Vue1.x中利用pr ...
- Vue2.0 Props双向绑定报错简易处理办法
在写项目的时候遇到了一个报错问题,虽然功能是正常运行,chrome的提示是:[Vue warn]: Avoid mutating a prop directly since the value wil ...
- 7.vue组件(二)--双向绑定,父子组件访问
本文主要说两件事 1. 如何实现父子组件之间的双向绑定 2. 父组件如何访问子组件的data,method, 子组件如何访问父组件的data,method等 一. 如何实现父子组件之间的双向绑定 案例 ...
- ionic3.x angular4.x ng4.x 自定义组件component双向绑定之自定义计数器
本文主要示例在ionic3.x环境下实现一个自定义计数器,实现后最终效果如图: 1.使用命令创建一个component ionic g component CounterInput 类似的命令还有: ...
- Vue父子组件数据双向绑定,子组件可修改props
第一种,子组件通过监听父组件数据,子组件改变数据之后通知给父组件 原文链接:https://blog.csdn.net/m0_37728716/article/details/81776929 父组件 ...
- VUE JS 使用组件实现双向绑定
1.VUE 前端简单介绍 VUE JS是一个简洁的双向数据绑定框架,他的性能超过ANGULARJS,原因是实现的机制和ANGULARJS 不同,他在初始化时对数据增加了get和set方法,在数据se ...
- vue 自定义组件 v-model双向绑定、 父子组件同步通信
父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx ...
- vue 自定义组件 v-model双向绑定、 父子组件同步通信【转】
父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx ...
随机推荐
- java 获取的是本地的IP地址
1 public static void main(String[] args) { 2 try { 3 InetAddress address = InetAddress.getLocalHost( ...
- 【LeetCode 23】合并K个排序链表
题目链接 [题解] 会归并排序吧? 就把这K个链表当成是K个数字就好. 然后做归并排序. 因为归并排序的时候本来就会有这么一个过程. [l..mid]和[mid+1..r]这两段区间都是有序的了已经. ...
- JCF——工具类
- delphi下运行vbscript脚本
简单一个vb脚本,功能为打开被限制的注册表.Set wso = CreateObject("WScript.Shell")wso.RegWrite "HKEY_CURRE ...
- js和php语法区别
参考 : https://www.wangjingxian.cn/php/51.html
- 如何禁止C++默认成员函数
如何禁止C++默认成员函数 发表于 2016-03-02 | 分类于 C++ | 阅读次数 17 前言 前几天在一次笔试过程中被问到C++如何设计禁止调用默认构造函数,当时简单的想法是直 ...
- ASP.NET Core学习——前言
跌跌撞撞,公司的新项目终于要在这个月月底上线. 新项目使用ASP.NET Core来做,以前没接触过这方面的内容,只能一边学习,一边搞开发. 眼看项目上线在即,工作没那么忙,也不需要天天加班. 回想了 ...
- Linux内存管理(深入理解Linux内核)
Linux的内存管理,实际上是借助80x86的硬件分段和分页电路,将逻辑地址转化为物理地址的. 物理内存中,有一部分是一直(Permanently)映射给内核使用的,这部分主要用于保存内核的代码,以及 ...
- java有序列表
关于有序和无序的定义: 有序:有序列表中的元素具有某种内在的关联,这种关联定义了列表之间的顺序 无序:无序列表中的元素按使用者所选择得任意方式排序 索引:索引列表为他的元素维护一段连续的数字索引值 有 ...
- CSP2019总结
CSP2019总结 前言 赛前停课集训了两个星期,自认为已经准备充分了,结果... 不知道有没有写挂分,即使一分没挂,满打满算也只有400出头,还是太菜了. Day0 晚上复习了一会,打了会游戏就睡了 ...