Vue props双向绑定
props是不能改变的
项目里遇到一个问题,就是props的组件内是不能改变,就像react中的props值也是不能改变的,
所以我在用的时候竟然忽略了这个点。真的要反省反省, 下面就是这个报错的问题:
use a data or computed property based on the prop's value
如何双向绑定
我做的是一个弹框的组件让在父组件调用,关闭和开启
子组件:这样
<section class="app-body" v-if="myShare">
<div class="cover" @click="closeMask"></div>
</section>
props


watch: {
result(val) {
console.log("监听的值" + val);
this.myShare = val; //监听外部对props属性result的变更,并同步到组件内的data属性中
},
myShare(val) {
console.log("改变的值" + val);
this.myShare = val;
//this.$emit("closeMask", val); //组件内对变更后向外部发送事件通知
}
},
也就是用 一个新的值赋给 那个props 穿过来的值,
父组件是
<share-mask :shareActivity="shareActivity" @closeMask="closeMask" ref="shareMask"/>

然后调用 子组件 内的 关闭 弹框的 方法。
就是这样 ,今天需要好好反省下,props 不能改变的都忘了,唉
Vue props双向绑定的更多相关文章
- 如何在Vue2中实现组件props双向绑定
Vue学习笔记-3 前言 Vue 2.x相比较Vue 1.x而言,升级变化除了实现了Virtual-Dom以外,给使用者最大不适就是移除的组件的props的双向绑定功能. 以往在Vue1.x中利用pr ...
- 西安电话面试:谈谈Vue数据双向绑定原理,看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...
- 揭密 Vue 的双向绑定
Vue 中需要输入什么内容的时候,自然会想到使用 <input v-model="xxx" /> 的方式来实现双向绑定.下面是一个最简单的示例 剖析Vue原理& ...
- Vue2.0 Props双向绑定报错简易处理办法
在写项目的时候遇到了一个报错问题,虽然功能是正常运行,chrome的提示是:[Vue warn]: Avoid mutating a prop directly since the value wil ...
- vue的双向绑定和依赖收集
在掘金上买了一个关于解读vue源码的小册,因为是付费的,所以还比较放心 在小册里看到了关于vue双向绑定和依赖收集的部分,总感觉有些怪怪的,然后就自己跟着敲了一遍. 敲完后,发现完全无法运行, 坑啊 ...
- Vue.js双向绑定的实现原理
Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...
- Vue.js双向绑定的实现原理和模板引擎实现原理(##########################################)
Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...
- vue的双向绑定原理及实现
前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...
- Vue数据双向绑定原理及简单实现
嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...
随机推荐
- python调用不同目录中类的终极方法
1.在需要导入别的类包中加入这两行代码 BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))sys.path.a ...
- java:反射(Hibernate的雏形)
* java.lang.Class类:Class类的实例表示正在运行的 Java 应用程序中的类和接口,没有构造方法. java反射机制是在运行状态中,对于任何一个类,都能够知道这个类的所有属性和方法 ...
- heartbeat双主高可用
一.基础配置 1.hostnamectl set-hostname node1 (node2) 2.[root@node1 ~]# cat /etc/hosts 192.168.40.128 ...
- 一本值得你反复研读的Python佳作《Python编程从0到1》
现在的Python入门书太多太多了,究竟如何选择呢? 当然选最好的最入门的讲解最清晰的,没有那么多废话的. 现在就推荐一本<Python编程从0到1>,还带视频的,到时候跟大家一起学习沟通 ...
- python 进程和串行(——)
进程 1.什么是串行? 串行:就是一个程序完完整整的运行完了,下个程序才运行. 2.什么是进程? 进程:一个正在运行的程序或一个程序运行的过程. 为什么要用进程. 提高程序执行效率. 多道技术:并发技 ...
- 在SQL Server 中创建外键
建外键的前提是此外键必须是另外一个表的主键. 建外键的步骤: 第一步打开要建外键表的设计器,右击选择“关系”. 然后弹出“外键关系”窗体,我们选择“添加”,然后点击“表和列规范”后面的小按钮, 就会弹 ...
- 启用hdfs的高可用
cm-HDFS: 选择另外一个节点的做NN, 生产选node3 选择三个节点作journalNode, node2,3,4 填入journalNode的目录/dfs/jn 经过一系列步骤,如果没报错 ...
- CM金丝雀Canary报错
参考: https://www.cnblogs.com/barneywill/p/10400788.html CM金丝雀Canary报错 1 HDFS 金丝雀Canary 测试无法为 /tmp/.cl ...
- 写 JSP 的痛点,真的非常痛!
一.前戏 前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦,并且前后端分离会为以后的大型分布式架构.弹性计算架构.微服 ...
- map member functions
http://www.cplusplus.com 搜了才发现map的成员函数这么多orz,跟着cplusplus按字典序走一遍叭(顺序有微调orz <1> map::at (c++11) ...