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实现动态时间显示代码
Feb 08 Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 Javascript
jQuery+Ajax实现限制查询间隔的方法
Jun 07 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
Jan 27 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
Dec 06 Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 Javascript
layer更改皮肤的实现方法
Sep 11 Javascript
JavaScript如何优化逻辑判断代码详解
Jun 08 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
制作美丽的拉花
2021/03/03 冲泡冲煮
php面向对象全攻略 (九)访问类型
2009/09/30 PHP
php教程之phpize使用方法
2014/02/12 PHP
php程序员应具有的7种能力小结
2014/11/27 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
IE不出现Flash激活框的小发现的js实现方法
2007/09/07 Javascript
Javascript模块模式分析
2008/05/16 Javascript
JavaScript效率调优经验
2009/06/04 Javascript
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
多个$(document).ready()的执行顺序实例分析
2014/07/26 Javascript
JS跨域问题详解
2014/11/25 Javascript
node.js+express制作网页计算器
2016/01/17 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
jQuery实现简易的输入框字数计数功能示例
2017/01/16 Javascript
jQuery插件artDialog.js使用与关闭方法示例
2017/10/09 jQuery
javascript实现电脑和手机版样式切换
2017/11/10 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
2018/05/06 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
在vue中使用eslint,配合vscode的操作
2020/11/09 Javascript
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
Python之PyUnit单元测试实例
2014/10/11 Python
python中__slots__用法实例
2015/06/04 Python
python 循环遍历字典元素的简单方法
2016/09/11 Python
python对象与json相互转换的方法
2019/05/07 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
复化梯形求积分实例——用Python进行数值计算
2019/11/20 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
如何解决pycharm调试报错的问题
2020/08/06 Python
Python中BeautifulSoup通过查找Id获取元素信息
2020/12/07 Python
3分钟英语演讲稿
2014/04/29 职场文书
应急管理培训方案
2014/06/12 职场文书
安全环保演讲稿
2014/08/28 职场文书
公司地址变更通知
2015/04/25 职场文书
婚礼父母致辞
2015/07/28 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书