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.核心就是用数据来驱动视图层的改变.先看一段代码. ...
随机推荐
- 阶段3 3.SpringMVC·_01.SpringMVC概述及入门案例_01.SpringMVC概述及入门案例
第二章 第三章 第四章 三层框架 springMvc是表现层
- OpenCL32 for mingw
OpenCL32 for MinGW 最新版本 2019.05.25 从 CUDA_Toolkit_10.1.168_425.25_win10 中提取的头文件和库文件: 链接: https://pan ...
- 占位图片placehold.it生成
(1)默认:http://www.placehold.it/350x200/cccccc/969696.jpg/&text=loading.. (2)格式:http://www.placeho ...
- pytest -- 测试的参数化
目录 1. @pytest.mark.parametrize标记 1.1. empty_parameter_set_mark选项 1.2. 多个标记组合 1.3. 标记测试模块 2. pytest_g ...
- java并发编程 线程基础
java并发编程 线程基础 1. java中的多线程 java是天生多线程的,可以通过启动一个main方法,查看main方法启动的同时有多少线程同时启动 public class OnlyMain { ...
- 【Qt开发】 数字转QString格式化
1 想要获得001 002 这样的数字 QString b=QString("%1").arg(i, 3, 10, QChar('0')); QStringList list; ...
- leveldb Arena
背景我们都知道,对于一个高性能的服务器端程序来说,内存的使用非常重要.C++提供了new/delete来管理内存的申请和释放,但是对于小对象来说,直接使用new/delete代价比较大,要付出额外的空 ...
- Zookeeper - zookeeper安装与配置
1.什么时Zookeeper ZooKeeper:分布式服务框架 Zookeeper -- 管理分布式环境中的数据. 2.安装 1>官网下载压缩包并解压zookeeper-3.4.14.zip ...
- 小记---------spark组件与其他组件的比较 spark/mapreduce ;spark sql/hive ; spark streaming/storm
Spark与Hadoop的对比 Scala是Spark的主要编程语言,但Spark还支持Java.Python.R作为编程语言 Hadoop的编程语言是Java
- Office批量授权(VL)版本和激活方法
Office 2010 Office 2010中文专业增强版 32位 文件名: SW_DVD5_Office_Professional_Plus_2010w_SP1_W32_ChnSimp_CORE_ ...