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();
},
};