一、直接使用属性传递的方式传递
父组件中传递的参数可以有很多个,如果子组件中未使用props接收的话,会逐级的往下面传递并且会挂载在当时组件的dom上,见下图
1、父组件给儿子组件传递参数
<template>
<Son2
:name="'哈哈'"
:age="20"
:bookList="['三国演义', '西游记']"
:details="{'name': '张三', address: '广东深圳'}"
:isActive="false"
></Son2>
</template>
2、在儿子组件中不接收
<template>
<div>
<p>son2组建: {{$attrs}}</p>
</div>
</template>
<script>
export default {
// inheritAttrs: false, 如果不想要在dom上显示传递过来的属性,就加上这个
};
</script>
3、需要将剩余参数(当前组件未接收完的,全部传递到下一个子组件中)
<Grandson2 v-bind="$attrs" />
二、使用v-on="$listeners"进行跨组件传递事件
1、父组件中
<template>
<div>
<p>父组件</p>
<Son2
:name="'哈哈'"
:age="20"
:bookList="['三国演义', '西游记']"
:details="{'name': '张三', address: '广东深圳'}"
:isActive="false"
@change="change"
></Son2>
</div>
</template>
<script>
import Son2 from './Son2';
export default {
name: 'parent2',
methods: {
change() {
console.log('我被点击了');
},
},
components: {
Son2,
},
};
</script>
<style scoped></style>
2、子组件中继续传递下去
<Grandson2 v-bind="$attrs" v-on="$listeners" />
1
3、在孙组件中调用
export default {
mounted() {
console.log(this);
this.$listeners.change();
},
};
三、使用生产者与消费者的方式进行跨组件传递参数
1、父组件中
export default {
name: 'parent2',
provide() {
return {
parent: {
name: '哈哈',
age: 20,
gender: '男',
},
};
},
};
2、在需要取值的组件中
export default {
inject: ['parent'],
mounted() {
console.log(this.parent);
},
};
四、使用Bus
vue中的bus事件,一般作为中央事件总线来使用, 使用场景
1、小型项目(大项目直接使用vuex)
2、两个没关联关系的组件(有关联关系的也可以使用,但是一般会不会这样使用)
A、B 组件是两个相互没关联的组件,A 组件要去调用 B 组件中的一个方法
使用方式
1、在main.js中直接挂载到原型上
// 直接挂载到原型上
Vue.prototype.$bus = new Vue();
2、组件 A 中使用$emit发送一个事件
<template>
<div>
<p>我是孙组件</p>
<button @click="bus">bus事件</button>
</div>
</template>
<script>
export default {
methods: {
bus() {
this.$bus.$emit('busEvent');
},
},
};
</script>
3、在 B 组件中使用$on接受发送出来的事件
export default {
methods: {
print () {
console.log('我是bus事件调用的打印的方法');
}
},
mounted () {
this.$bus.$on('busEvent', this.print);
},
}
</script>