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 相关文章推荐
Javascript优化技巧(文件瘦身篇)
Jan 28 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
一些实用性较高的js方法
Apr 19 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
js简单实现调整网页字体大小的方法
Jul 23 Javascript
JS多物体实现缓冲运动效果示例
Dec 20 Javascript
浅谈实现vue2.0响应式的基本思路
Feb 13 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
Jun 26 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
Jul 23 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
May 07 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
Jul 17 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/01 无线电
PHP新手上路(四)
2006/10/09 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
深入解析WordPress中加载模板的get_template_part函数
2016/01/11 PHP
程序员的表白神器“520”大声喊出来
2016/05/20 PHP
基于JQuery的一句代码实现表格的简单筛选
2010/07/26 Javascript
express的中间件bodyParser详解
2014/12/04 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
2015/09/06 Javascript
jQuery动态生成Bootstrap表格
2016/11/01 Javascript
JS常用算法实现代码
2016/11/14 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
webpack构建react多页面应用详解
2017/09/15 Javascript
浅谈vue,angular,react数据双向绑定原理分析
2017/11/28 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
Vue中android4.4不兼容问题的解决方法
2018/09/04 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
2018/09/07 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
vuex实现像调用模板方法一样调用Mutations方法
2019/11/06 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
[03:22]DSPL第一期精彩集锦:酷炫到底!
2014/11/07 DOTA
python基础教程之类class定义使用方法
2014/02/20 Python
python爬虫爬取某站上海租房图片
2018/02/04 Python
python特性语法之遍历、公共方法、引用
2018/08/08 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
Python 实现敏感目录扫描的示例代码
2020/05/21 Python
python re的findall和finditer的区别详解
2020/11/15 Python
社区服务活动总结
2014/05/07 职场文书
高一军训的心得体会
2014/09/01 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
教师个人教学总结
2015/02/11 职场文书
企业财务总监岗位职责
2015/04/03 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书
大国崛起观后感
2015/06/02 职场文书
新闻通讯稿模板
2015/07/22 职场文书