1. 夫传子
概述 : 父组件 在子组件身上通过自定义属性传值,子组件内通过props接收值
props属性:用于父组件传递数据给子组件,这样子组件就可以使用该值
注意 : 我们在子组件接收到的值并改变他的值不会影响父组件的状态
- 父组件
//你导入的子组件中自定义属性
<Tab :name="name"></Tab>
- 子组件
//通过props来接收父组件传的值
export default {
props:{
name: Array, //传过来的数据进行定义
name:{
type:Array,//接收name的类型
required:true, //name必要,也就是必须传的
default:99//你传我就用你的,你不传我就用默认值
}
}
}
2. 子传夫
概述 : 父组件 提前在子组件身上通过自定义事件绑定事件,子组件内通过$emit触发事件并传值
- 父组件
<template>
<Tab @cur="curs"></Tab>
<!-- @cue这个事件就是子组件用这个事件来传递参数用curs函数来接收 -->
<template>
<script>
methods: {
curs(data){ //这里就是子组件传递过来的参数
this.click_index = data;
}
},
</script>
- 子组件
<template>
<div @click="函数(参数)"></div>
</template>
<script>
export default {
methods:{
函数(参数){
this.$emit('cur',参数) //cur就是父组件的事件,来进行传递参数
}
}
}
</script>
3. 兄弟组件通信也适用于任意组件通信
创建全局事件总线 来实现通信
$bus的值是一个Vue实例,this指向的就是这个Vue实例
我们在用完之后要销毁,否则回出现内存泄漏的现象
//在main.js中执行
//把vue实例绑定在vue原型对象上,这样任何组件都可以找到
new Vue({
el:"#app",
render:h=>h(App),
beforeCreate(){
Vue.prototype.$bus = this//安装全局事件总线
}
})
// //更好的实现同级组件通信
// 一个兄弟this.$bus.$on监听
// 另一个兄弟this.$bus.$emit触发事件传值
//我们在监听得时候记得消除了监听得事件
//我们在用完这个傀儡记得消除
beforeDestroy(){
this.$bus.$off('hello')
}
4. 组件跨级通信
外层组件通过provide传值,
给内层组件provide :{ name :"值"}
内层组件通过inject接收值 inject :["name"]
//祖先组件
//1
provide(){
return{ name :this.paramsOne}
},
//2
provide(){ name :"我是paramsOne"},
//孙子组件
inject:['name'],
data(){
return{
name : this.name
}
}
}