026 V props的基本玩法

不二如是

                               
登录/注册后可看大图

上一讲我们搞定了组件模版的限制，本次来学习props的基本玩法。

组件不仅仅是要把模板的内容进行复用，更重要的是使组件之间相互通信。

所谓通信，可以这么理解：

父组件的模板中包含子组件，父组件要正向地向子组件传递参数或数据。

子组件接受到后，根据参数的不同来渲染不同的内容或相应的操作。

这种通信过程，我们就要用props实现。

在组件中，使用props来生命需要从父级接收的数据，props值可以是两种：

1、字符串数组
2、对象

我们先来介绍字符串数组的，对象的留在后续教程中。

比如我们创建一个数组，接收一个来自父级的数据message，并将其在组件模板中渲染。

创建div：

1. <div id="myApp">
   
2.     <my-component message="来自父组件的问候"></my-component>
   
3. </div>

复制代码

创建组件和Vue实例：

1. <script>
   
2.     Vue.component('my-component',{
   
3.         props:['message'],
   
4.         template:'<p>{{message}}</p>'
   
5.     })
   
6. 
   
7.     var app = new Vue({
   
8.         el:"#myApp"
   
9.     })
   
10. </script>

复制代码

上例中的message数据就是通过props从父级传递过来的。

在组件的自定义标签上写该props的名称。

props中声明的数据与组件data函数返回的数据主要区别就是：

props来自父级，data中的数据是组建自己的。

两种数据都可以在template模板、computed和methos中使用。

如果要传递多个数据，在props的数组中添加相应的项即可。

由于HTML不区分大小写，当使用DOM模板时，使用短横分隔符命名（例如：new-fishc）。

组件中就使用驼峰命名（newFishc）。

例如：

1. <div id="myApp">
   
2.     <my-component hello-fishc="来自父组件的问候"></my-component>
   
3. </div>

复制代码

创建组件：

1.   Vue.component('my-component',{
   
2.         props:['helloFishc'],
   
3.         template:'<p>{{helloFishc}}</p>'
   
4.     })

复制代码

日常开发中，我们很少传一个固定的值，父级数据往往是动态的。

我们可以使用v-bind指令来动态绑定props的值。

这样当父组件的数据变化时，也会传递给子组件，创建div：

1. <div id="myApp">
   
2.     <input type="text" v-model="parentMessage">
   
3.     <my-component v-bind:message="parentMessage"></my-component>
   
4. </div>

复制代码

创建组件和Vue实例：

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

复制代码

使用v-model来绑定了父级的parentMessage数据。

当通过输入框输入时，子组件接收到props的message也会实时更新。

---

课后作业


1、通信可以理解为父组件向其中的子组件传递参数或数据（T/F）

2、通过使用什么方法可以实现父组件向子组件之间的通信。

3、props的值可以是字符串数组？

4、data函数return的数据和props的数据有何区别？

5、需要动态接收父级的数据，如何操作？



答案：

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

---

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

                               
登录/注册后可看大图

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

                               
登录/注册后可看大图

Ruide

1.T
2.通过props属性
3.T
4.前者为组件的自有数据，props为父组件传向子组件的数据
5.通过v-bind绑定props的值

jack6666

1