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 数值项目的格式化函数代码
May 14 Javascript
一个js拖拽的效果类和dom-drag.js浅析
Jul 17 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
Nov 22 Javascript
javascript实现实时输出当前的时间
Apr 27 Javascript
浅析angularJS中的ui-router和ng-grid模块
May 20 Javascript
JS中的进制转换以及作用
Jun 26 Javascript
初识简单却不失优雅的Vue.js
Sep 12 Javascript
前端自动化开发之Node.js的环境搭建教程
Apr 01 Javascript
写gulp遇到的ES6问题详解
Dec 03 Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 Javascript
js实现整体缩放页面适配移动端
Mar 31 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
神族 Protoss 剧情介绍
2020/03/14 星际争霸
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
CodeIgniter框架常见用法工作总结
2017/03/16 PHP
PHP实现的解汉诺塔问题算法示例
2018/08/06 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
javascript removeChild 使用注意事项
2009/04/11 Javascript
js防止表单重复提交的两种方法
2013/09/30 Javascript
jquery操作select详解(取值,设置选中)
2014/02/07 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
JS中怎样判断undefined(比较不错的方法)
2014/03/27 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
2014/04/04 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
node.js中express-session配置项详解
2017/05/31 Javascript
Mint UI组件库CheckList使用及踩坑总结
2018/12/20 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
2019/08/20 Javascript
jQuery实现评论模块
2020/08/19 jQuery
JavaScript实现前端倒计时效果
2021/02/09 Javascript
[01:32]2016国际邀请赛中国区预选赛IG战队首日赛后采访
2016/06/27 DOTA
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
完美解决python3.7 pip升级 拒绝访问问题
2019/07/12 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
解决tensorflow读取本地MNITS_data失败的原因
2020/06/22 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
美国在线和移动免费会员制批发零售商:Boxed(移动端的Costco)
2020/01/02 全球购物
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
汽车制造与装配专业自荐信范文
2014/01/02 职场文书
十佳青年个人事迹材料
2014/01/28 职场文书
迟到检讨书500字
2014/02/05 职场文书
入股合作协议书
2014/10/12 职场文书
2015年乡镇发展党员工作总结
2015/03/31 职场文书
关于成立领导小组的通知
2015/04/23 职场文书
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android
《艾尔登法环》Boss腐烂树灵很有可能是《黑暗之魂3》的一个废案
2022/04/11 其他游戏
centos7安装mysql5.7经验记录
2022/05/02 Servers
java版 联机五子棋游戏
2022/05/04 Java/Android