Vue.js实战学习-组件详解(二)

使用props传递数据

     基本用法

      组件不仅仅是要把模版的内容进行复用，更重要的是组件间要进行通信。通常父组件的模版中包含子组件，父组件要正向地向子组件传递数据或参数，子组件接收到后根据参数的不同来渲染不同的内容或执行操作。这个正向传递数据的过程就是通过props来实现的。

     在组件中，使用选项props来声明需要从父级接收的数据，props的值可以是两种，一种是字符串数组，一种是对象，本节先介绍数组的用法。比如我们构造一个数组，接收一个来自父级的数据message，并把它在组件模板中渲染，示例代码如下：

<div id="app">
   <my-component message="来自父组件的数据"></my-component>
</div>
<script>
   Vue.component('my-component', {
      props: ['message'],
      template: '<div>{{ message }}</div>'
   });
   var app = new Vue({
      el: '#app'
   })
</script>

       渲染后的结果为：

<div id="app">
   <div>来自父组件的数据</div>
</div>

       props中声明的数据与组件data函数return的数据主要区别就是props的来自父级，而data中的是组件自己的数据，作用域是组件本身，这两种数据都可以在模板template及计算属性computed和方法methods中使用。上例的数据message就是通过props从父级传递过来的，在组件的自定义标签上直接写该props的名称，如果要传递多个数据，在props数组中添加项即可。

      有时候，传递的数据并不是直接写死的，而是来自父级的动态数据，这时可以使用指令v-bind来动态绑定props的值，当父组件的数据变化时，也会传递给子组件。示例代码如下：

<div id="app">
   <input type="text" v-model="parentMessage">
   <my-component :message="parentMessage"></my-component>
</div>
<script>
   Vue.component ('my-component', {
      props: ['message'],
      template: '<div> {{ message }} </div>'
   });
   var app = new Vue({
      el: '#app',
      data: {
        parentMessage: ''
      }
   })
</script>

       这里用v-model绑定了父级的数据parentMessage，当通过输入框任意输入时，子组件接收到的props “message”也会实时响应，并更新组件模板。