一、直接使用属性传递的方式传递
父组件中传递的参数可以有很多个,如果子组件中未使用
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" />
-
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>