vue父孙组件传值($attr及$listeners)的使用

父组件
<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>

 

上一篇:Vue 组件间通信六种方式(完整版)


下一篇:vue--六种组件传值