Vue基础之使用props传递数据

1、基本用法

组件不仅仅是要把模板的内容进行复用，更重要的是组件间要进行通信。通常父组件的模板中包含子组件，父组件要正向地向子组件传递数据或参数，子组件接收到后根据参数的不同来渲染不同的内容或执行操作。这个正向传递数据的过程就是通过props来实现的。在组件中，使用选项props来声明需要从父级接收的数据，props的值可以是两种，一种是字符串数组，一种是对象，这块先介绍数组的用法。比如我们构造一个数组，接收一个来自父级的数据message，并把它在组件模板中渲染，示例代码如下：

<div id="app">
		<my-component message="来自父组件的消息"></my-component>
		<my-component message="来自父组件的消息1"></my-component>
	</div>
	<script type="text/javascript">
		Vue.component('my-component',{
		     props:['message'],
		     template:'<div>{{message}}</div>',
		     data
		});

		var vm=new Vue({
		     el:"#app"
		})
	</script>

渲染后的结果为：

<div id="app">
   <div＞来自父组件的消息</div>
   <div＞来自父组件的消息1</div>
</div>

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

        由于HTML特性不区分大小写，当使用DOM模板时，驼峰命名(camelCase）的props名称要转为短横分隔命名(kebab-case）。

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

<div id="app">
		<input type="text" v-model="parentMessage">
		<my-component :message="parentMessage"></my-component>
		<my-component message="来自父组件的消息"></my-component>
		<my-component message="来自父组件的消息1"></my-component>
	</div>
	<script type="text/javascript">
		Vue.component('my-component',{
		     props:['message'],
		     template:'<div>{{message}}</div>',
		});

		var vm=new Vue({
		     el:"#app",
		     data:{
		         parentMessage:""
		     }
		})
	</script>

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

     注意：如果你要直接传递数字、布尔值、数组、对象，而且不使用v-bind，传递的仅仅是字符串，尝试下面的示例来对比：

	<div id="app">
		<my-component message='[1,2,3]'></my-component>
		<my-component :message='[1,2,3]'></my-component>
	</div>
	<script type="text/javascript">
		Vue.component('my-component',{
		     props:['message'],
		     template:'<div>{{message.length}}</div>',
		});

		var vm=new Vue({
		     el:"#app",
		     data:{
		         parentMessage:""
		     }
		})
	</script>

可以看到结果没有绑定返回的是7明显是字符串长度。

二、单向数据流

        Vue 2.x与Vuel.x比较大的一个改变就是，Vue2.x通过props传递数据是单向的了，也就是父组件数据变化时会传递给子组件，但是反过来不行。而在Vuel.x里提供了.sync修饰符来支持双向绑定。之所以这样设计，是尽可能将父子组件解稿，避免子组件无意中修改了父组件的状态。

        业务中会经常遇到两种需要改变prop的情况，一种是父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改。这种情况可以在组件data内再声明一个数据，引用父组件的prop，示例代码如下：

	<div id="app">
		<my-component :message='1'></my-component>
	</div>
	<script type="text/javascript">
		Vue.component('my-component',{
		     props:['message'],
		     template:'<div>{{count}}</div>',
		     data:function(){
				return{
				count:this.message
			    }
		     }
		});

		var vm=new Vue({
		     el:"#app",
		     data:{
		         parentMessage:""
		     }
		})
	</script>

        组件中声明了数据count，它在组件初始化时会获取来自父组件的initCount，之后就与之无关了，只用维护count，这样就可以避免直接操作initCount。

        另一种情况就是prop作为需要被转变的原始值传入。这种情况用计算属性就可以了，示例代码如下：

<div id="app">
		<my-component :width='100'></my-component>
	</div>
	<script type="text/javascript">
		Vue.component('my-component',{
		     props:['width'],
		     template:'<div :style="style"></div>',
		     computed:{
				style:function(){
                   return{
                        width:this.width+'px'
                    }
                }
		     }
		});

		var vm=new Vue({
		     el:"#app",
		     data:{
		         parentMessage:""
		     }
		})
	</script>

        因为用css传递宽度要带单位（px），但是每次都写太麻烦，而且数值计算一般是不带单位的，所以统一在组件内使用计算属性就可以了。

        注意，在javascript是引用类型，指向同一个内存空间，所以props是对对象和数组时，在子组件内改变是会影响父组件的。

三、数据验证

        我们上面所介绍的props选项的值都是一个数组，一开始也介绍过，除了数组外，还可以是对象，当prop需要验证时，就需要对象写法。

        一般当你的组件需要提供给别人使用时，推荐都进行数据验证，比如某个数据必须是数字类型，如果传入字符串，就会在控制台弹出警告。

Vue.component（'my-component',｛
    props: {
         ／／必须是数字类型
        propA: Number, 
        ／／必须是字符串或数字类型
        propB: [String, Number], 
        ／／布尔值，如果没有定义，默认值就是true
        propC: { 
            type: Boolean, 
            default: true }
        ／／数字，而且是必传
        propD: { 
            type: Number, 
            required: true }
        ／／如果是数组或对象，默认值必须是一个函数来返回
        propE: { 
            type: Array, 
            default: function () { 
                    return [];
                } 
             }
            ／／自定义一个验证函数
        propF: { 
            validator: function (value) { 
                         return value > 10; 
                      }
               }
       } ) , 

验证的type类型可以是：

        • String

        • Number

        • Boolean

        • Object

        • Array

        • Function

type也可以是一个自定义构造器，使用instanceof检测。当prop验证失败时，在开发版本下会在控制台抛出一条警告。