vue父子组件实现
父子组件通信方式
Vue中父子组件通信主要通过props和自定义事件实现。父组件向子组件传递数据使用props，子组件向父组件传递数据使用自定义事件。
父组件向子组件传值
父组件通过props向下传递数据给子组件。子组件需要显式声明接收的props。
父组件模板：
<template>
<child-component :message="parentMessage"></child-component>
</template>子组件接收：
export default {
props: ['message'],
// 或者带类型检查
props: {
message: String
}
}子组件向父组件传值
子组件通过$emit触发自定义事件，父组件通过v-on监听这些事件。
子组件触发事件：
this.$emit('update', newValue)父组件监听：
<child-component @update="handleUpdate"></child-component>双向绑定实现
使用v-model语法糖可以简化双向数据绑定。
子组件实现：
export default {
model: {
prop: 'value',
event: 'input'
},
props: ['value']
}父组件使用：
<child-component v-model="parentData"></child-component>插槽内容分发
父组件可以通过插槽向子组件传递模板内容。
子组件定义插槽：
<slot name="header"></slot>
<slot></slot> <!-- 默认插槽 -->父组件使用：
<child-component>
<template v-slot:header>
<h1>标题</h1>
</template>
<p>默认内容</p>
</child-component>依赖注入
对于深层嵌套组件，可以使用provide/inject避免逐层传递props。
祖先组件：
export default {
provide() {
return {
sharedData: this.sharedData
}
}
}后代组件：
export default {
inject: ['sharedData']
}访问组件实例
父组件可以通过ref访问子组件实例。
父组件：
<child-component ref="child"></child-component>this.$refs.child.methodName()子组件可以通过$parent访问父组件实例，但不推荐这种紧耦合方式。
