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

方案一:

  1. 用data对象中创建一个props属性的副本

  2. watch props属性 赋予data副本 来同步组件外对props的修改

  3. 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双向绑定解决方案的更多相关文章

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

    注意: 子组件不能直接修改prop过来的数据,会报错 方案一: 用data对象中创建一个props属性的副本 watch props属性 赋予data副本 来同步组件外对props的修改 watch ...

  2. 如何在Vue2中实现组件props双向绑定

    Vue学习笔记-3 前言 Vue 2.x相比较Vue 1.x而言,升级变化除了实现了Virtual-Dom以外,给使用者最大不适就是移除的组件的props的双向绑定功能. 以往在Vue1.x中利用pr ...

  3. Vue2.0 Props双向绑定报错简易处理办法

    在写项目的时候遇到了一个报错问题,虽然功能是正常运行,chrome的提示是:[Vue warn]: Avoid mutating a prop directly since the value wil ...

  4. 7.vue组件(二)--双向绑定,父子组件访问

    本文主要说两件事 1. 如何实现父子组件之间的双向绑定 2. 父组件如何访问子组件的data,method, 子组件如何访问父组件的data,method等 一. 如何实现父子组件之间的双向绑定 案例 ...

  5. ionic3.x angular4.x ng4.x 自定义组件component双向绑定之自定义计数器

    本文主要示例在ionic3.x环境下实现一个自定义计数器,实现后最终效果如图: 1.使用命令创建一个component ionic g component CounterInput 类似的命令还有: ...

  6. Vue父子组件数据双向绑定,子组件可修改props

    第一种,子组件通过监听父组件数据,子组件改变数据之后通知给父组件 原文链接:https://blog.csdn.net/m0_37728716/article/details/81776929 父组件 ...

  7. VUE JS 使用组件实现双向绑定

    1.VUE 前端简单介绍  VUE JS是一个简洁的双向数据绑定框架,他的性能超过ANGULARJS,原因是实现的机制和ANGULARJS 不同,他在初始化时对数据增加了get和set方法,在数据se ...

  8. vue 自定义组件 v-model双向绑定、 父子组件同步通信

    父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa"  子组件使用$emit('update:msg', 'msg改变后的值xxx ...

  9. vue 自定义组件 v-model双向绑定、 父子组件同步通信【转】

    父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa"  子组件使用$emit('update:msg', 'msg改变后的值xxx ...

随机推荐

  1. java 获取的是本地的IP地址

    1 public static void main(String[] args) { 2 try { 3 InetAddress address = InetAddress.getLocalHost( ...

  2. 【LeetCode 23】合并K个排序链表

    题目链接 [题解] 会归并排序吧? 就把这K个链表当成是K个数字就好. 然后做归并排序. 因为归并排序的时候本来就会有这么一个过程. [l..mid]和[mid+1..r]这两段区间都是有序的了已经. ...

  3. JCF——工具类

  4. delphi下运行vbscript脚本

    简单一个vb脚本,功能为打开被限制的注册表.Set wso = CreateObject("WScript.Shell")wso.RegWrite "HKEY_CURRE ...

  5. js和php语法区别

    参考 : https://www.wangjingxian.cn/php/51.html

  6. 如何禁止C++默认成员函数

    如何禁止C++默认成员函数 发表于 2016-03-02   |   分类于 C++  |   阅读次数 17 前言 前几天在一次笔试过程中被问到C++如何设计禁止调用默认构造函数,当时简单的想法是直 ...

  7. ASP.NET Core学习——前言

    跌跌撞撞,公司的新项目终于要在这个月月底上线. 新项目使用ASP.NET Core来做,以前没接触过这方面的内容,只能一边学习,一边搞开发. 眼看项目上线在即,工作没那么忙,也不需要天天加班. 回想了 ...

  8. Linux内存管理(深入理解Linux内核)

    Linux的内存管理,实际上是借助80x86的硬件分段和分页电路,将逻辑地址转化为物理地址的. 物理内存中,有一部分是一直(Permanently)映射给内核使用的,这部分主要用于保存内核的代码,以及 ...

  9. java有序列表

    关于有序和无序的定义: 有序:有序列表中的元素具有某种内在的关联,这种关联定义了列表之间的顺序 无序:无序列表中的元素按使用者所选择得任意方式排序 索引:索引列表为他的元素维护一段连续的数字索引值 有 ...

  10. CSP2019总结

    CSP2019总结 前言 赛前停课集训了两个星期,自认为已经准备充分了,结果... 不知道有没有写挂分,即使一分没挂,满打满算也只有400出头,还是太菜了. Day0 晚上复习了一会,打了会游戏就睡了 ...