简单Vue父子组件单向数据绑定和传递

通常在写vue的时候总是要处理很多父子组件之间的数据传递。子组件中的数据会因为父组件发生改变而改变。但是如何子组件里没有什么复杂的操作的话，直接就能在父组件里调用另外一个组件。

比如现在有一个view叫做jobDetailView，这个view里面调用了mycascader这个组件，mycascader是通过引用了element.ui的el-cascader的组件，重新封装（其实mycascader里面并没有什么复杂的数据和function，做一个简单的例子，就先这么举例了）所以这里我们有这么一个父子组件的关系。

所以 cascder的父组件是 mycascader， mycascader的父组件是 jobdetailview

<!--JobDetailView.vue-->
<template>
	<mycascader :options=“options”></mycascader>
</template>
<script>
	data() {
		return {
		    options: "" //initialize options and will be updated, then passes to its child component
		};
	},
</script>
复制代码

<!--Cascader.vue-->
<template>
	// 此处的options2被绑定在el-cascader上，
	<el-cascader :options="options2" :props="prop"> </el-cascader>
</template>
	
<script>
	name: 'my-cascader',
	props:['options'],//passing from fahter component, which is JobDetailView
	data() {
		// data return 回来的值可以当作是该组件data的初始化。
		return {
			options2: this.options,
			prop: {
    			    value: 'modeType',
    			    children: 'metricType'
    		        }
				// 像prop这种没有改变的数据就直接在该组件内定义，然后将其绑定给子组件el-cascader
	        };
	}
</script>
复制代码

转载于:https://juejin.im/post/5b0d542e5188251570336634