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 相关文章推荐
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
Aug 14 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
Jan 12 Javascript
动态加载dtree.js树treeview(示例代码)
Dec 17 Javascript
深入理解JS中的变量及作用域、undefined与null
Mar 04 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
May 30 Javascript
JavaScript交换两个变量值的七种解决方案
Dec 01 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
Jan 04 Javascript
js实现定时进度条完成后切换图片
Jan 04 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
Dec 26 Javascript
vue中实现移动端的scroll滚动方法
Mar 03 Javascript
vue props传值失败 输出undefined的解决方法
Sep 11 Javascript
JavaScript实现轮播图效果
Oct 30 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
做个自己站内搜索引擎
2006/10/09 PHP
一个简单实现多条件查询的例子
2006/10/09 PHP
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
php socket通信简单实现
2016/11/18 PHP
laravel 之 Eloquent 模型修改器和序列化示例
2019/10/17 PHP
jquery UI 1.72 之datepicker
2009/12/29 Javascript
js模拟滚动条(横向竖向)
2013/02/22 Javascript
Jquery遍历Json数据的方法
2015/04/20 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
2016/11/10 Javascript
JavaScript中setTimeout的那些事儿
2016/11/14 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
webpack实现热加载自动刷新的方法
2017/07/30 Javascript
VUE实现一个分页组件的示例
2017/09/13 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
2017/10/24 jQuery
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
微信小程序实现随机验证码功能
2018/12/20 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
2020/06/22 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
python使用Matplotlib画条形图
2020/03/25 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
python2.7 安装pip的方法步骤(管用)
2019/05/05 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
坚定理想信念心得体会
2014/03/11 职场文书
公司业务员岗位职责
2014/03/18 职场文书
2014年商场工作总结
2014/11/22 职场文书
小学教师教育随笔
2015/08/14 职场文书
2016年寒假见闻
2015/10/10 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书
2016年党支部公开承诺书
2016/03/25 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书