子件和父组件之间难免会涉及到数据传输的问题，尤其是在父（根）组件通过ajax请求获取数据后，在传入子组件中得以显示时。传输方式便显得尤为重要。
Vue提供的传输方法
（父传子）props传输数据
这里，我们不妨将实例app当做父组件
//生成一个实例
const app = new Vue({
el:"#app",
data:{
message:'我爱你',
array:[1,2,3,4]
},
components:{
cpn
}
})
//注册组件cpn
//需要注意的是我们在使用props传入数据时，需要在子组件外围设置一个根（一个包裹如div）
<template id="cnp" >
<div>
<h2>{{carray}}</h2>
<p>{{cmessage}}</p>
</div>
</template>
const cpn={
template:'#cnp',
//注册的组件的data必须是一个函数（用于返回对象）
data(){
return {
}
},
//声明props
传入父组件数据
props:{
carray:Array,
cmessage:{
type:String,
default:"我日你先人",
// 是否必须传值
// required:true
}
}
}
<div id="app">
//使用v-bind语法糖
//将array中的值绑定到carray中
//将message中的值绑定到cmessage中
<cpn :cArray="array" :cMessage="message"></cpn>
</div>
至此，最简单的传值操作就已经完成了
值得注意的是，v-bind语句不支持驼峰命名法，若在props中的元素使用驼峰命名法，则需要在绑定值时使用 -分割线
（子传父）自定义事件传递数据
父传子时是通过props属性来完成的，而当我们遇到子传父时，则需要注册自定义事件
一般情况下，子组件发生了某个事件，我们希望父组件根据该事件做出相应的一个调整与反映。
同样的我，我们先创建一个子组件
<template id="cnp">
<div>
<button
v-for="item in categories"
@click = 'itemClick(item)'
>{{item.name}}</button>
</div>
</template>
<script>
const cpn = {
template: '#cnp',
}
const app = new Vue({
el: "#app",
components: {
cpn
}
})
</script>
子传父的应用场景比较多的是子组件中发生了某些事件，我们希望父组件知道并且作出反映。在此，我们模拟一个简单的传输过程。现将整个子组件丰富一下，然后在此我们将自定义事件在子组件中进行一个注册
const cpn = {
template: '#cnp',
data() {
return {
categories:[
{id:'111',name:'apple'},
{id:'112',name:'iphone'},
{id:'113',name:'ipad'},
{id:'114',name:'huawei'},
{id:'115',name:'xiaomi'}
]
}
},
methods:{
itemClick(item){
// console.log(item);
// 发射(事件,参数)
this.$emit('item-click',item)
}
}
}
<template id="cnp">
<div>
<button
v-for="item in categories"
@click = 'itemClick(item)'
//注册点击事件
>{{item.name}}</button>
</div>
</template>
子组件发射事件后，父组件需要对该事件进行监听，监听方式：在父组件的模板上使用v-on绑定事件。
<div id="app">
//以前我们使用v-on绑定的事件都是默认注册好的事件，自定义事件注册后，便可以在其作用域（父组件）内进行监听、绑定
//监听的自定义事件的命名需要从驼峰命名法进行转化（使用脚手架可忽略）
//若在监听事件时没有传入参数（如cpnClick(item)传入参数），将会默认传入子组件发射的参数，在这里为item
<cpn @item-click="cpnClick"></cpn>
<div>我爱{{ things }}</div>
</div>
在父组件中注册监听后，还需要在父组件内部注册事件
const app = new Vue({
el: "#app",
data: {
message: '我爱你',
array: [1, 2, 3, 4],
things:"NONE"
},
methods:{
cpnClick(item){
console.log(item.id);
this.things = item.name;
}
},
components: {
cpn
}
})
至此，我们完成了对父传子操作的全过程。运行截图如下：
