父组件
<template> <div> <!-- 将值传给子组件 子组件可以获取自己想要的值 也可以忽视掉需要传给孙子组件的值 --> <!-- 同时获取通过$listeners传递的孙子组件事件(@test2)和$emit传递的子组件事件($test1) --> <Child1 :child1Info="child1" :child2Info="child2" @test1="onTest1" @test2="onTest2"> </Child1> </div> </template> <script> import Child1 from './child1'; export default { data() { return { child1:"hahha", child2:"asdsdasd" }; }, components: { Child1 }, methods: { onTest1(msg) { console.log('test1 running...',msg); }, onTest2(msg) { console.log('test2 running',msg); } } }; </script>
子组件
<template> <div class="child-1"> <p>props-child1Info: {{child1Info}}</p> <p>$attrs: {{$attrs}}</p> <hr> <!-- 通过v-bind 绑定$attrs属性,孙子组件组件可以直接获取父组件传递的值(除了child1组件中props声明的)通过v-on绑定$listeners属性 父组件可以获取从孙子组件传来的事件 --> <Child2 v-bind="$attrs" v-on="$listeners"></Child2> </div> </template> <script> import Child2 from './child2'; export default { props: {
child1Info: {
type: String,
default: ''
}
}, data() { return {}; }, components: { Child2 }, mounted() { this.$emit('test1','嘻嘻'); } }; </script>
孙子组件
<template> <div class="child-2">
<-- 可以直接通过$attrs来得到父组件传递过来的值 --> <p> $attrs 的值: {{$attrs.child2Info}}</p> <hr> </div> </template> <script> export default { data() { return {}; }, mounted() {
// 通过$emit来给父组件传递事件 this.$emit('test2','哈哈'); } }; </script>