vue props 单项数据流实例分享


Posted in Javascript onFebruary 16, 2020

vue props 单项数据流实例分享

父组件传递动态值showStoreList,子组件通过props接收,但是如果在子组件中直接使用并修改这个值会报错;

因为父级的更新会传递给子组件,但是反过来则不行;

这种情况下,可以使用computed或watch来获取props中的值

vue props 单项数据流实例分享

以上实例不难,下面由三水点靠木小编整理的补充内容:

Vue2.x通过props传递数据是单向的了,也就是父组件数据变化时会传递给子组件,但是反过来不行。

业务中会经常遇到两种需要改变prop的情况,

一种是父组件传递初始值进来,子组件将它作为初始值保存起来,在自己的作用域下可以随意使用和修改。这种情况可以在组件data内再声明一个数据,引用父组件的prop,示例代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="app">
    <my-component :init-count="1"></my-component>
  </div>
  <script>
    Vue.component('my-component',{
      props:['init-count'],
      template:'<div>{{count}}</div>',
      data:function(){
        return {
          count:this.initCount
        }
      }
    })
    new Vue({
      el:'#app',
    })
  </script>
</body>
</html>

组件中声明了数据count,它在组件初始化时会获取来自父组件的initCount,之后就与之无关了,只用维护count,这样就可以避免直接操作initCount。

另一种情况就是prop作为需要被转变的原始值传入。这种情况用计算属性就可以了,示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="app">
    <mynew-component :width="100"></mynew-component>
  </div>
  <script>
    Vue.component('mynew-component',{
      props:['width'],
      template:'<div :style="style">组件内容</div>',
      computed:{
        style:function(){
          return {
            width:this.width+'px',
            background:'lightgray',
            textAlign:'center'
          }
        }
      }
    })
    new Vue({
      el:'#app',
    })
  </script>
</body>
</html>

注意:

在JavaScript中对象和数组是引用类型,指向同一个内存空间,所以props是对象和数组时,在子组件内改变是会影响父组件的。

//如此解决引用传递

1:var newObject = jQuery.extend(true, {}, oldObject);

2:var obj={};

obj=JSON.parse(JSON.stringify(oldObject));

以上就是本次介绍地全部相关知识点,感谢大家的学习和对三水点靠木的支持。

Javascript 相关文章推荐
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 Javascript
图片img的src不变让浏览器重新加载实现方法
Mar 29 Javascript
js内存泄露的几种情况详细探讨
May 31 Javascript
JavaScript操纵窗口的方法小结
Jun 28 Javascript
ExtJS中设置下拉列表框不可编辑的方法
May 07 Javascript
Bootstrap实现下拉菜单效果
Apr 29 Javascript
基于JS实现的笛卡尔乘积之商品发布
May 13 Javascript
JavaScript之DOM_动力节点Java学院整理
Jul 03 Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 Javascript
vux uploader 图片上传组件的安装使用方法
May 15 Javascript
vue动态设置路由权限的主要思路
Jan 13 Vue.js
JavaScript parseInt0.0000005打印5原理解析
Jul 23 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
Feb 16 #Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
Feb 16 #Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
Feb 16 #Javascript
封装一下vue中的axios示例代码详解
Feb 16 #Javascript
Vue.js的模板语法详解
Feb 16 #Javascript
Vue两个版本的区别和使用方法(更深层次了解)
Feb 16 #Javascript
vue数据响应式原理知识点总结
Feb 16 #Javascript
You might like
php a simple smtp class
2007/11/26 PHP
php下intval()和(int)转换使用与区别
2008/07/18 PHP
利用PHP制作简单的内容采集器的原理分析
2008/10/01 PHP
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
$()JS小技巧
2007/07/21 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
JavaScript声明变量时为什么要加var关键字
2014/09/29 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
2016/05/17 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
2016/06/23 Javascript
关于在Servelet中如何获取当前时间的操作方法
2016/06/28 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
Python自定义函数的创建、调用和函数的参数详解
2014/03/11 Python
python编写的最短路径算法
2015/03/25 Python
Python利用多进程将大量数据放入有限内存的教程
2015/04/01 Python
Python标准库笔记struct模块的使用
2018/02/22 Python
python matplotlib折线图样式实现过程
2019/11/04 Python
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
Python大批量搜索引擎图像爬虫工具详解
2020/11/16 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
俄罗斯大型在线书店:Читай-город
2019/10/10 全球购物
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
行政办公室岗位职责
2014/03/18 职场文书
护理专业求职信
2014/06/15 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
在JavaScript中如何使用宏详解
2021/05/06 Javascript
Python何绘制带有背景色块的折线图
2022/04/23 Python
mysql sock文件存储了什么信息
2022/07/15 MySQL