1 在父组件当中，最外层组件2 3 <template>4     <div>5         <Child1 :child1Info="child1" :child2Info="child2" v-on:test1="onTest1" v-on:test2="onTest2">6         </Child1>7     </div>8 </template>9 <script>
10 import Child1 from './child1';
11 export default {
12     data() {
13         return {
14             child1:"hahha",
15             child2:"asdsdasd"
16         };
17     },
18     components: { Child1 },
19     methods: {
20         onTest1(msg) {
21             console.log('test1 running...',msg);
22         },
23         onTest2(msg) {
24             console.log('test2 running',msg);
25         }
26     }
27 };
28 </script>

 1 //在子组件中2 3 <template>4     <div class="child-1">5         <p>在子组件当中:</p>6         <p>props-child1Info: {{child1Info}}</p>7         <p>$attrs: {{$attrs}}</p>8         <hr>9         <!-- Child2组件中能直接触发test的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性 -->
10         <!-- 通过v-bind 绑定$attrs属性，Child2组件可以直接获取到A组件中传递下来的props（除了child1组件中props声明的） -->
11         <Child2 v-bind="$attrs" v-on="$listeners"></Child2>
12     </div>
13 </template>
14 <script>
15 import Child2 from './child2';
16 export default {
17     props: ['child1Info'],
18     data() {
19         return {};
20     },
21     components: { Child2 },
22     mounted() {
23         this.$emit('test1','嘻嘻');
24     }
25 };
26 </script>

 1 //在孙子组件当中：2 3 4 <template>5     <div class="child-2">6         <p>在最里层组件当中child2:</p>7         <p>props-child2Info: {{child2Info}}</p>8         <p> $attrs 的值: {{$attrs}}</p>9         <hr>
10     </div>
11 </template>
12 <script>
13 export default {
14     props: ['child2Info'],
15     data() {
16         return {};
17     },
18     mounted() {
19         this.$emit('test2','哈哈');
20     }
21 };
22 </script>