组件传值类型
目前，Vue的组件传值类型分为3中
- 父传子
- 子传父
- 子串子
接下来将为你讲解其中的实现方式，其中，我们假设需要传递的信息的变量名都为msg。
父传子
父辈组件向子组件传值使用了props，在父组件中的子组件标签中使用v-bind：自定义一个属性，假设这里叫做cProperties，将msg赋值给它，然后在组件中定义props属性，指定该属性的值为父组件传递过来的cProperties，这样才能使用这个数据。
<div id="app">
<!-- 绑定自定义属性cProperties，其值为要传递的值，指定为父组件的msg -->
<com1 :cProperties="msg"></com1>
</div>
<script>
var vm = new Vue({
el:'#app',
data: {
msg: '父组件的传值' // 父组件要传递的值
},
components: {
com1: {
template: `<h1>子组件 {{cProperties}}</h1>`,
// 使用props获取父组件传递的值，通过父组件自定义的属性来绑定值
// props是一个数组，用于其数据都是由父组件传过来的,其数据只读，无法重新赋值
props: ['cProperties']
}
}，
methods: {},
})
</script>
子传父
想要子传父，首先我们需要为子组件绑定一个父组件的事件，在父组件的子组件标签中，使用v-on自定义事件cEvents,将它和父组件中的事件绑定，这里假设为show，通过将父组件中的事件传递给子组件，子组件再调用父组件传递的方法，并传递值来实现子传父。
子组件中，使用$emit来调用父组件传递的事件，该函数一般有两个参数，第一个参数为父组件中自定的事件名，在这里我们自定的事件名为cEvents，第二个参数为传递的值。如下代码所示：
<div id="app">
<!-- 绑定事件，通过将父组件的事件传递给子组件，子组件调用该事件并传入一个值 -->
<com2 @cEvents="show"></com2>
</div>
<template id="tmp">
<h1>子组件 </h1>
<input type="button" value="触发方法" @click="myclick">
</template>
<script>
var com2 = {
template: "#tmp",
data() {
return {
msg: '子组件传递的信息'
}
}
methods: {
myclick() {
// 当点击子组件的触发方法时，使用$emit触发父组件的传递过来的方法
// 触发的方法为自定方法名
// $emit第一个参数为父组件定义的自定义事件，第二个参数以及以后都是为传递的参数
this.$emit('cEvents', this.msg)
}
}
}
var vm = new Vue({
el:'#app',
data: {},
methods: {
show (msg) {
console.log(`传回来的值为${msg}`)
}
},
components: {
com2
}，
})
</script>
子传子
通过上面的描述，作者描述如何进行组件间父传子，和子传父，那么，拥有同一个父组件的两个子组件如何传值呢，其实很简单，通过一个中间组件，父组件，子与子之间的传值，这里定义为子1和子2，子1要传给子2，我们首相将子1的值通过$emit的触发父组件的自定方法传给父组件，再由父组件使用自定义属性和props传递给子2