026 V props的基本玩法
本帖最后由 不二如是 于 2018-9-27 14:51 编辑https://xxx.ilovefishc.com/forum/201808/24/170823gj1tj61c4apj6o1e.jpg
上一讲我们搞定了组件模版的限制，本次来学习props的基本玩法。
组件不仅仅是要把模板的内容进行复用，更重要的是使组件之间相互通信。
所谓通信，可以这么理解：
父组件的模板中包含子组件，父组件要正向地向子组件传递参数或数据。
子组件接受到后，根据参数的不同来渲染不同的内容或相应的操作。
这种通信过程，我们就要用props实现。
在组件中，使用props来生命需要从父级接收的数据，props值可以是两种：
1、字符串数组
2、对象
我们先来介绍字符串数组的，对象的留在后续教程中。
比如我们创建一个数组，接收一个来自父级的数据message，并将其在组件模板中渲染。
创建div：
<div id="myApp">
<my-component message="来自父组件的问候"></my-component>
</div>
创建组件和Vue实例：
<script>
Vue.component('my-component',{
props:['message'],
template:'<p>{{message}}</p>'
})
var app = new Vue({
el:"#myApp"
})
</script>
上例中的message数据就是通过props从父级传递过来的。
在组件的自定义标签上写该props的名称。
props中声明的数据与组件data函数返回的数据主要区别就是：
props来自父级，data中的数据是组建自己的。
两种数据都可以在template模板、computed和methos中使用。
如果要传递多个数据，在props的数组中添加相应的项即可。
由于HTML不区分大小写，当使用DOM模板时，使用短横分隔符命名（例如：new-fishc）。
组件中就使用驼峰命名（newFishc）。
例如：
<div id="myApp">
<my-component hello-fishc="来自父组件的问候"></my-component>
</div>
创建组件：
Vue.component('my-component',{
props:['helloFishc'],
template:'<p>{{helloFishc}}</p>'
})
日常开发中，我们很少传一个固定的值，父级数据往往是动态的。
我们可以使用v-bind指令来动态绑定props的值。
这样当父组件的数据变化时，也会传递给子组件，创建div：
<div id="myApp">
<input type="text" v-model="parentMessage">
<my-component v-bind:message="parentMessage"></my-component>
</div>
创建组件和Vue实例：
<script>
Vue.component('my-component',{
props:['message'],
template:'<p>{{message}}</p>'
});
var app = new Vue({
el:"#myApp",
data:{
parentMessage:''
}
})
</script>
使用v-model来绑定了父级的parentMessage数据。
当通过输入框输入时，子组件接收到props的message也会实时更新。
课后作业
1、通信可以理解为父组件向其中的子组件传递参数或数据（T/F）
2、通过使用什么方法可以实现父组件向子组件之间的通信。
3、props的值可以是字符串数组？
4、data函数return的数据和props的数据有何区别？
5、需要动态接收父级的数据，如何操作？
答案：
**** Hidden Message *****
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif 1.T
2.通过props属性
3.T
4.前者为组件的自有数据，props为父组件传向子组件的数据
5.通过v-bind绑定props的值 1
页:
[1]