组件之间的通信---父组件向子组件传递数据

        在使用Vue框架进行前端开发时，难免会遇到多组件协同工作。

        组件的种类有局部注册组件与全局注册组件，局部注册的组件常常用在局部注册的内部使用，这个时候就需要处理好该两者组件之间的通信问题。组件间的通信也分为两种情况：1，父组件向子组件传递数据；2子组件向父组件传递数据。

        在处理这两种问题之前要了解清楚全局组件几个重要选项。全局组件中的props，该选项的作用是接收并设置父组件传递来的自定义属性，其数量、属性等设置是用来配置template中关键数据。 

        例如下列代码：此为子组件(全局注册组件)代码，自定义的spinner(微调器)中包含有四个props属性，这些属性所得的数据相互独立并无特殊含义，引入这些数据是为了后续工作中对用户每次点击sub或者add按钮时，在其对应的点击函数里作为约束条件来影响input中的关键数据。

    template:`
		<div class="spinner">
		    <button class="sub" @click="subClick">-</button>   //sub与add按钮需要绑定单击事件
		    <input type="text" v-model.number="current"/>                     
		    <button class="add" @click="addClick">+</button>
		</div>
	`,
	props:{                       //下列4个属性是设置微调器的初值、微调刻度、最小值和最大。
		value:{
			required:true,        //value值为不可缺少的属性
			type:Number           //type设置属性取值的数据类型
		},
		step:{
			type:Number,          //default为属性的默认值
			default:1
		},
		min:{
			type:Number,
			default:1
		},
		max:{
			type:Number,
			default:100
		}
	},

        下列为父组件代码，现在的目的是将父组件中data中的数据传递进入子组件中。

let vw=new Vue({
	data:{
		inputNumber:10        //要传递的数据
	},
}).$mount("#app")

        下列为HTML中书写的代码，在此处将父组件中的inputNumber与value进行绑定，从而将数据传入父组件中。

<my-spinner :value="inputNumber" ></my-spinner>

        注意：在子组件的template模板中input双向绑定了一个名为current的东西，而不是直接绑定value，这是因为在props接收的数据不能在子组件中赋值，即props接收的数据在子组件中是只读的，这回导致input无法正常使用，所以需要一个current对value进行接收。同时在定义current时，也能分为data数据区元素或者computed计算属性两种情况，这也涉及到子组件向父组件传递数据。

//（1）current作为data中的变量进行设置
    data(){
		return{
			current:this.value,
		}
}
//（2）current作为computed计算属性进行设置
	computed:{
		current(){
            return this.value;
		}
	},