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双向绑定的更多相关文章

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

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

  2. 西安电话面试:谈谈Vue数据双向绑定原理,看看你的回答能打几分

    最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...

  3. 揭密 Vue 的双向绑定

    Vue 中需要输入什么内容的时候,自然会想到使用 <input v-model="xxx" /> 的方式来实现双向绑定.下面是一个最简单的示例 剖析Vue原理& ...

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

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

  5. vue的双向绑定和依赖收集

    在掘金上买了一个关于解读vue源码的小册,因为是付费的,所以还比较放心 在小册里看到了关于vue双向绑定和依赖收集的部分,总感觉有些怪怪的,然后就自己跟着敲了一遍. 敲完后,发现完全无法运行,  坑啊 ...

  6. Vue.js双向绑定的实现原理

    Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...

  7. Vue.js双向绑定的实现原理和模板引擎实现原理(##########################################)

    Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...

  8. vue的双向绑定原理及实现

    前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...

  9. Vue数据双向绑定原理及简单实现

    嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...

随机推荐

  1. 阶段3 2.Spring_10.Spring中事务控制_11 spring5新特性的介绍

    jdk1.7和1.8的差别 准备好的一个maven工程 反射创建对象10亿次 ,用的时间 替换jdk的版本 选择为1.7 切换了1.7的版本以后呢执行的速度就变的非常的慢 两个版本的对比 响应式编程风 ...

  2. Web05_jQuery

    在官方网站下载包,下载不带有min的包 http://jquery.com/download/ 案例一:使用JQ完成首页定时弹出广告图片 01_JQ入门 01_jQuery入门.html <!D ...

  3. java:(json,ajax,path,Oracle的分页实例,Filter拦截器)

    1.json: <%@ page language="java" import="java.util.*" pageEncoding="UTF- ...

  4. 浏览器从输入URL到渲染出页面发生了什么

    总体来说分为以下几个过程: 1.  DNS解析 2. TCP连接 3. 发送HTTP请求 4. 服务器处理请求并返回HTTP报文 5. 浏览器解析渲染页面 6. 连接结束 参考资料:[https:// ...

  5. line-height 与 height 的区别

    line-height是行高的意思,它决定了元素中文本内容的高度,height则是定义元素自身的高度. height:表示  行高 line-height:表示   每行文字所占的高度   举例: 第 ...

  6. LoadRunner12.53录制手机应用

    1 打开LR12.53 选择File-new script and solution: 2 选择录制协议输入脚本名称和位置点击create: 3 点击设置录制选项: 4 设置代理及端口: 5 点击开始 ...

  7. 【HANA系列】SAP ECLIPSE中创建ABAP项目的步骤

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP ECLIPSE中创建AB ...

  8. NOIP2013提高问题求解T2(关于递推与递归)

    同步发表于我的洛谷博客. NOIP2013提高问题求解2: 现有一只青蛙,初始时在n号荷叶上.当它某一时刻在k号荷叶上时,下一时刻将等概率地随机跳到1,2,--,k号荷叶之一上,直到跳到第1号荷叶为止 ...

  9. 【VS开发】【智能语音处理】DTW算法(语音识别)

    DTW主要是应用在孤立词识别的算法,用来识别一些特定的指令比较好用,这个算法是基于DP(动态规划)的算法基础上发展而来的.这里介绍语音识别就先介绍下语音识别的框架,首先我们要有一个比对的模版声音,然后 ...

  10. flask第一级

    #从flask这个包中导入Flask这个类 #Flask这个类是项目的核心,以后很多操作都是基于这个类的对象 #注册url.注册蓝图等都是基于这个类的对象 from flask import Flas ...