Vue使用props传递数据-蒲公英云

Vue使用props传递数据

1. Vue使用props传递数据

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

在组件中，使用选项props来声明需要从父级接受的数据，props的值可以是两种，一种是数组，一种是对象。

数组的方式：props后边是数组的形式

<div id="app">
        <my-component></my-component>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <template id="myComponent">
        <div message='来自父组件的数据'></div>
    </template>
    <script type="text/javascript">
        Vue.component('my-component',{
            props:['message'],
            template : '#myComponent',
        });
        new Vue({
            el:"#app",
        });
    </script>

渲染的结果是：

props与data函数中return的数据的主要区别：props是来自父级，而data中的是组件自己的数据。作用域是组件的本身。这两种数据都可以在模板template以及计算属性和mothods中使用。（作用的区域不同）

有的时候从父级传递过来的数据并不是写死的，而是来自父级的动态数据，这时候使用指令v-bind来动态绑定props的值，当父组件的数据发生变化的时候，也会传递给子组件。很好的一个例子：如下

<div id="app">
        <input type="text" v-model="parentMessage">
        <my-component :message="parentMessage"></my-component>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <template id="myComponent">
        <div :message='message'>{
   {message}}</div>
    </template>
    <script type="text/javascript">
        Vue.component('my-component',{
            props:['message'],
            template : '#myComponent',
        });
        new Vue({
            el:"#app",
            data:{
                parentMessage:''
            }
        });
    </script>

2 单向数据流

Vue2.0以后就开始的是单向数据流，意思是父组件可以给子组件传递数据，但是反过来不行。在Vue1.0可以通过.sync修饰符来支持双向传递。Vue2.0这样设计的好处是让父组件和子组件之间解耦。在JS中对象和数组是引用类型，指向的同一个地址，所以当子组件发生改变了，父组件也会随之改变。为了避免这种情况的发生，采用的单向数据流。

大多数的业务中，子组件接受到了父组件的数据，会进行改变… 所以处理这种情况常采用以下的两种方式。

在组件data中再声明一个数据引用父组件传来的数据，然后在子组件对新声明的数据进行操作即可，例子：

 <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
 <template id="myComponent">
     <div :message='newData'>{
{newData}}</div>
 </template>
 <script type="text/javascript">
     Vue.component('my-component',{
         props:['message'],
         template : '#myComponent',
         data: function(){
             return{
                 newData: this.message,
             }
         }
     });
     new Vue({
         el:"#app",
         data:{
             parentMessage:''
         }
     });
 </script>