027 V props的单向传递

不二如是

                               
登录/注册后可看大图

上一讲我们搞定了props的基本玩法，本次了解一下实用的“单向数据流”。

Vue 2.x和Vue 1.x不同之处就在于：

前者单向通过props传递数据。

也就是父组件数据变化时会传递给子组件，反过来不可以。

Vue 1.x提供了.sync修饰符来实现双向绑定。

为什么要设计成单向绑定呢？

很简单，尽可能将父子组件解耦，避免子组件无意中修改了父组件的内容。

在日常开发中常会在两种情况下改变props，我们一个一个来看。

第一种情况：

父组件传递初始值进来，子组件将它作为初始值保存起来。

在子组件的作用域下可以随意使用和修改。

这种情况就要在组件data内再声明一个数据，引用父组件的props。

创建div：

1. <div id="myApp">
   
2.     <my-component v-bind:init-count="1"></my-component>
   
3. </div>

复制代码

创建组件和Vue实例：

1. <script>
   
2.     Vue.component('my-component',{
   
3.         props:['initCount'],
   
4.         template:'<p>{{count}}</p>',
   
5.         data:function(){
   
6.             return{
   
7.                 count:this.initCount
   
8.             }
   
9.         }
   
10.     });
    
11. 
    
12.     var app = new Vue({
    
13.         el:"#myApp"
    
14.     })
    
15. </script>

复制代码

组件中声明了数据count，它在组件初始化时获取来自父组件的initCount。

只需要维护count，不会对父组件造成影响。

第二种情况：

props作为需要被改变的原始值传入。

这种情况用计算属性就可以了，创建div：

1. <div id="myApp">
   
2.     <my-component v-bind:width="888"></my-component>
   
3. </div>

复制代码

创建组件和Vue实例：

因为用CSS传递宽度要有单位（px），每次写又很麻烦，所以统一在组件内使用计算属性就可以了。

---

课后作业


1、Vue 2.x和Vue 1.x不同之处在于哪里？

2、设计成单向数据绑定有什么好处？

3、在第一种改变props的情况下，子组件接收到父组件传递的初始值后可以在自己的定义域内随意修改和使用该值。（T/F）



答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

lbjstudypython

1.Vue2.x单向通过props传递数据
2.避免子组件修改父组件
3.F

Ruide

1.前者只支持props的单向传递到子组件
2.子组件不会改变父组件的数据
3.T

一笙彤

。

jack6666

1