什么是组件？
组件是一个可以复用的vue实例，可以实现局部代码的交互和复用的集合。
vue2中组件之间的数据传递？
Props（父→子）
父组件通过v-bind绑定需要传递的值，子组件在props中接收传递过来的值。
父组件中通过v-bind绑定传递的参数：
<comSon :getName='name' />
子组件中通过props接收传递过来的值：
export default {
props: {
getName: {
type: String,
default: ''
}
}
}
自定义事件（子→父）
在子组件中通过this.$emit()方法定义一个自定义事件，在父组件中通过v-on监听传递过来的自定义事件。 子组件中自定义事件：
mounted () {
this.$emit('setGift', this.gift)
},
父组件中通过v-on监听自定义事件：
<comSon :getName='name' @setGift='thanks' />
bus总线传值：（子→子）
使用bus总线可以实现子组件和子组件之间的传递。
第一步：在main.js中添加一行代码
Vue.prototype.$bus = new Vue()
第二步：组件A中使用$emit()定义自定义事件
change () {
this.$bus.$emit('busChangeVal', this.bussName)
}
第三步：组件B中使用$on()接收传递的值
created () {
this.$bus.$on('busChangeVal', (val) => {
console.log(`监听到传递过来的值${val}`)
})
},
vue3中组件之间的数据传递？
Props（父→子）
在vue3中父传子同样适用props传递，但是传递对象时需要注意：直接无法修改响应式对象，直接修改后台会报错，可以通过toRefs转化成普通对象再去修改；
setup(props) {
// 直接无法修改传递过来的响应式对象
// const person1 = props;
// person1.name = "李四"; // Set operation on key "name" failed: target is readonly.
//通过toRefs转化成普通对象再进行修改
const person1 = toRefs(props.person);
person1.name = "李四";
return {
person1,
};
},
自定义事件（子→父）
vue3中的子传父也是通过自定义事件传递的。
//子组件
setup(props,context) {
//自定义事件
context.emit("toParent",'脑白金')
},
//父组件
<ComA @toParent="getGift" />
function getGift(val) {
console.log(val); //脑白金
}
兄弟组件传值
vue3中删除了全局事件总线，就是在vue2中用的eventBus，，在vue3中如果兄弟组件传值，可以通过vuex，或者使用vue官方提供的两个插件mitt 或 tiny-emitter。
传后辈（爷→孙）
在前辈组件中使用provide传递数据
setup() {
const data = reactive({
person: {
name: "张三",
},
});
//provide用于传递数据
provide('provideName',data.person)
return {
data,
};
},
在晚辈组件中使用inject接收数据
setup() {
const provideName = inject("provideName");
return {
provideName,
};
},
