（1）组件通信

父组件向子组件传递数据。这个正向传递数据的过程就是通过props来实现的。

两者区别：props中声明的数据与组件data函数return返回的数据的主要区别就是props来自父级，而data中是组件自己的数据，作用域是组件本身，这两种数据都可以在模板template、计算属性computed、方法methods中使用。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>demo1</title>

    <script type="text/javascript" src="vue-2.6.9.min.js"></script>

</head>

<body>

  <div id="demo">

    <textarea v-model="message" v-bind:placeholder="placeholder"></textarea>

    <demo-component v-bind:message="message"></demo-component>

  </div>

  <script type="text/javascript">

    Vue.component('demo-component',{

      props:['message'],

      template:`

        <div class="demo-area">

          {{message}}

        </div>

      `

    });

    var demo = new Vue({

      el:'#demo',

      data:{

        message:'来自父级的数据',

        placeholder:'请输入'

      }

    })

  </script>

</body>

</html>

（2）单向数据流

业务中会经常遇到两种需要改变props的情况，一种是父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改。这种情况可以在组件data中再声明一个数据，引用父组件的prop

  <div id="demo">

    <demo-component v-bind:initcount="initcount"></demo-component>

  </div>

  <script type="text/javascript">

    Vue.component('demo-component',{

      props:['initcount'],

      template:`

        <div class="demo-area">

          {{count}}

        </div>

      `,

      data:function(){

        return {

          count:this.initcount

        }

      }

    });

    var demo = new Vue({

      el:'#demo',

      data:{

        'initcount':'1'

      }

    });

  </script>

组件里声明了数据count，它在组件初始化时会获取来自父级组件的initcount，之后便与之无关，只用维护count，这样就可以避免直接操作initcount。

（3）另一种情况就是prop作为需要被转变的原始值传入，这种情况用计算属性即可。

  <div id="demo">

    <demo-component v-bind:width="width"></demo-component>

  </div>

  <script type="text/javascript">

    Vue.component('demo-component',{

      props:['width'],

      template:`

        <div class="demo-area" v-bind:style="style">

          组件内容

        </div>

      `,

      computed:{

        style(){

          return {width:this.width+'px'};

        }

      }

    });

    var demo = new Vue({

      el:'#demo',

      data:{

        'width':

      }

    });

  </script>

.

vue之props传值与单向数据流的更多相关文章

  1. vue第十八单元(单向数据流 vuex状态管理)

    第十八单元(单向数据流 vuex状态管理) #课程目标 1.理解什么是数据管理模式 2.什么是vuex 3.什么时候使用vuex 4.vuex安装及工作原理 5.vuex语法 #知识点 1.首先来看下 ...

  2. Vue props 单向数据流

    1.props通信 注意:DOM模板的驼峰命名props要转为短横分割命名. <!DOCTYPE html> <html lang="zh"> <he ...

  3. Vue 父子组件传值 props

    1.Vue 的渲染周期: vue 如何实现响应式追踪. 父子组件通信有很多方式,今天单独聊下props 的方式.我们通过查找官方文档很容发现,props传值有静态和动态两种传值方式. 当然props ...

  4. Vue 组件&组件之间的通信 之 单向数据流

    单向数据流:父组件值的更新,会影响到子组件,反之则不行: 修改子组件的值: 局部数据:在子组件中定义新的数据,将父组件传过来的值赋值给新定义的数据,之后操作这个新数据: 如果对数据进行简单的操作,可以 ...

  5. vue第九单元(非父子通信 events 单向数据流)

    第九单元(非父子通信 events 单向数据流) #课程目标 了解非父子组件通信的原理,熟练实现非父子组件间的通信(重点) 了解单向数据流的含义,并且明白单向数据流的好处 #知识点 #1.非父子组件间 ...

  6. vue 单向数据流 & 双向绑定

    在react中是单向数据绑定,而在vue中的特色是双向数据绑定.但是其实就我个人的理解是: 其实无论是vue还是react其实还是提倡单向数据流去管理状态,这一点在vuex和redux状态管理器上体现 ...

  7. 关于Vue中props的详解

    看一下官方文档: 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.父组件的数据需要通过 prop 才能下发到子组件中. 也就是props是子组件访问父组件数 ...

  8. vue-父子组件之传值和单项数据流问题

    前言 我们知道 vue 中父子组件的核心概念是单项数据流问题,props 是单项传递的.那究竟什么是单项数据流问题,这篇文章来总结一下关于这个知识点的学习笔记. 正文 1.父组件传值给子组件 < ...

  9. React 精要面试题讲解(一) 单向数据流

    react 单向数据流概念 'react框架是怎样的数据流向?'||'react单向数据流是怎样的概念 ?' 解答这个问题之前,我们首先得知道,js框架是个怎样的概念. 框架:具备一定**编程思想** ...

随机推荐

  1. Memcache存储大数据的问题（大于1m）

    Memcached存储单个item最大数据是在1MB内,如果数据超过1M,存取set和get是都是返回false,而且引起性能的问题. 我们之前对排行榜的数据进行缓存,由于排行榜在我们所有sql se ...

  2. 【position】

    background-position 定位的position的区别 background-position 相对的位置是(容器的宽度-子元素的宽度) 当子元素的宽度大于容器的宽度 backgroun ...

  3. 在使用react时的异步问题解决

    在时用react时, 常常会出现在创建一个对象后, 对象还没有创建完成就被使用的异步问题, 介于这种问题, 一种解决方法就是使用Promise, 将需要被等待的那一步放到Promise中, Promi ...

  4. wamp的手动安装

    Wamp的手动安装 (http://www.cnblogs.com/homezzm/archive/2012/08/01/2618062.html) 一.Apache2.4安装 1.修改\Apache ...

  5. bzoj 1614: [Usaco2007 Jan]Telephone Lines架设电话线【二分+spfa】

    二分答案,然后把边权大于二分值的的边赋值为1,其他边赋值为0,然后跑spfa最短路看是否满足小于等于k条边在最短路上 #include<iostream> #include<cstd ...

  6. 洛谷P3287 [SCOI2014]方伯伯的玉米田（树状数组）

    传送门 首先要发现,每一次选择拔高的区间都必须包含最右边的端点 为什么呢?因为如果拔高了一段区间,那么这段区间对于它的左边是更优的,对它的右边会更劣,所以我们每一次选的区间都得包含最右边的端点 我们枚 ...

  7. [浏览器美化]去除 Firefox 当前选中标签页顶端的线条

    Firefox 当前选中的标签页的最上方会显示有一条线,我觉得很丑,如图: 在地址栏输入 about:support ,然后点击打开目录. 在此目录中创建一个 chrome 文件夹(若没有),然后进入 ...

  8. [Usaco2008 Dec]Hay For Sale 购买干草

    Description 约翰遭受了重大的损失:蟑螂吃掉了他所有的干草,留下一群饥饿的牛．他乘着容量为C(1≤C≤50000)个单位的马车,去顿因家买一些干草． 顿因有H(1≤H≤5000)包干草,每一 ...

  9. _bzoj1087 [SCOI2005]互不侵犯King【dp】

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1087 令f(i, j, k)表示前i列,二进制状态为j,已经用了k个国王的方案数,则 f(i ...

  10. 找规律 UVALive 6506 Padovan Sequence

    题目传送门 /* 找规律:看看前10项就能看出规律,打个表就行了.被lld坑了一次:( */ #include <cstdio> #include <algorithm> #i ...