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中对象和数组是引用类型，指向的同一个地址，所以当子组件发生改变了，父组件也会随之改变。为了避免这种情况的发生，采用的单向数据流。

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

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

<div id="app">
		<my-component :message="111"></my-component>
	</div>

	<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>	

2. 另一种情况是prop作为需要被转变的原始值传入。这种情况用计算属性。比如这种情况，用CSS传递宽度的时候要带单位（px），但是每次写很麻烦，而且数值计算一般不带单位的，所以统一在组件的计算属性中就可以了