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 appendChild,innerHTML,join性能比较代码
Aug 29 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
Jan 23 Javascript
jQuery+ajax读取并解析XML文件的方法
Sep 09 Javascript
基于javascript实现按圆形排列DIV元素(一)
Dec 02 Javascript
bootstrapValidator表单验证插件学习
Dec 30 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
Jul 04 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
Nov 29 Javascript
javascript实现Emrips反质数枚举的示例代码
Dec 06 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
Dec 22 Javascript
vue+iview/elementUi实现城市多选
Mar 28 Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 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
php array_unique之后json_encode需要注意
2011/01/02 PHP
一个完整的PHP类包含的七种语法说明
2015/06/04 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
js倒计时小程序
2013/11/05 Javascript
js对象转json数组的简单实现案例
2014/02/28 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
浅谈Javascript中Object与Function对象
2015/09/26 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
2015/12/02 Javascript
js实现卡片式项目管理界面UI设计效果
2015/12/08 Javascript
利用Node.js制作爬取大众点评的爬虫
2016/09/22 Javascript
详解jQuery选择器
2016/12/21 Javascript
简单实现js鼠标跟随效果
2020/08/02 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
vue.js项目nginx部署教程
2018/04/05 Javascript
VUE实现图片验证码功能
2020/11/18 Javascript
微信小程序使用GoEasy实现websocket实时通讯
2020/05/19 Javascript
Python基于scapy实现修改IP发送请求的方法示例
2017/07/08 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
Python numpy矩阵处理运算工具用法汇总
2020/07/13 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
GetYourGuide台湾:预订旅游活动、景点和旅游项目
2019/06/10 全球购物
Java面试题及答案
2012/09/08 面试题
枚举和一组预处理的#define有什么不同
2016/09/21 面试题
自我鉴定的范文
2013/10/03 职场文书
《天游峰的扫路人》教学反思
2014/04/25 职场文书
2014红色之旅心得体会
2014/10/07 职场文书
会计求职简历自我评价
2015/03/10 职场文书
python之PySide2安装使用及QT Designer UI设计案例教程
2021/07/26 Python
使用 Apache Dubbo 实现远程通信(微服务架构)
2022/02/12 Servers
tomcat默认最大连接数及相关调整方法
2022/05/06 Servers