在 Vue 中，父子组件的关系可以总结为 props 向下传递，事件向上传递。父组件通过 props 给子组件下发数据，子组件通过事件给父组件发送消息。
1、父组件向子组件传值 ---props父组件：<my-com :flag="name" :msg-attr="11"></my-com>
子组件：
（1）props: ['flag']
（2）props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: { type: String, required: true },
// 带有默认值的数字
propD: { type: Number, default: 100 } }
（4）对象或数组默认值必须从一个工厂函数获取
props: {
obj: {
type: Object,
default() {
return {
name: 'lisi'
}
}
}
}
（5）自定义验证函数
props{
msgAttr: {
type: Number,
required: true,
validator(val) {
return val > 10
}
}
}
2、组件向父组件传值---$emit子组件：this.$emit('myEvent')
emit方法可以向上传递两个参数，第一个参数是向上发送事件的名称（必填），第二个参数，是发送上去的子组件数据。
子组件向父组件传参是通过事件进行的。
let component1 = {
data () {
return {
comMsg: '我是子组件数据'
}
},
template: `
<div>
//第一步：先绑定一个点击事件
<button @click="emitHandler">发送数据</button>
</div>
`,
methods: {
emitHandler() {
//第二步：通过emit向上发送数据
this.$emit('myevent', this.comMsg)；
}
}
}
父组件：第三步：父组件引入子组件通过v-on来监听子组件的状态
<my-com1 @myevent="myevent" :msg-attr="11" :flag="true"></my-com1>
comMsg是子组件传过来的值
methods: {
myevent(comMsg) {
this.name = comMsg;
}
}
应用---自定义按钮 <div id="app"> //使用自定义组件（父组件） <my-button type="primary">主要按钮</my-button> <my-button type="success">成功按钮</my-button> </div> <script> //自定义组件（子组件） let component = { //父组件向子组件传参 props: { //带有默认值 type: { type: String, default: 'primary' } }, //在data方法中返回一个obj对象（对象里定义了两个按钮的属性值） data() { return { obj: { primary: { backgroundColor: '#409eff', border: 0, borderRadius: '2px', width: '97px', height: '40px', color: 'white' }, success: { backgroundColor: '#67c23a', border: 0, borderRadius: '2px', width: '97px', height: '40px', color: 'white' } } } }, //在template里重新给按钮动态绑定style样式，用插槽来充当一个占位符，将父组件里填充的内容加载过来 template: ` <button :style="obj[type]"> <slot></slot> </button> ` } //创建vue实例 let vm = new Vue({ el: "#app", data: {}, methods: {}, created() {}, //局部注册组件 components: { myButton: component } }) </script>