Vue 获得 $emit 对应函数的返回值

获得$emit对应函数的返回值

1. 大概的问题就是, 子组件 Avatar 触发了父组件 Info 的回调, 希望拿到回调函数的返回值进而拿到父组件的某些信息, 比如

   • 下面是子组件

   • <template>
       <div style="background-color: skyblue;">
         <div>我是Avatar-子组件</div>
         <button @click="getParentInfo">点我获取信息</button>
       </div>
     </template>
     
     <script>
     export default {
       data() {
         return {
         }
       },
       methods: {
         getParentInfo() {
           const returnValue = this.$emit('getInfo');
           console.log('返回值是', returnValue);
         }
       }
     }
     </script>
     

   • 下面是父组件

   • <template>
       <div style="background-color: pink; padding-bottom: 1rem;">
         <div>我是Info-父组件</div>
         <Avatar @getInfo="getInfoCallback"></Avatar>
       </div>
     </template>
     
     <script>
     import Avatar from './Avatar.vue';
     
     export default {
       components: { Avatar, },
       data() {
         return {
           name: 'hello, world'
         }
       },
       methods: {
         getInfoCallback() {
           return this.name;
         }
       }
     }
     </script>
     

   • 

   • 可以看到, $emit 返回的并不是父组件的 name 属性, 而是子组件实例

2. 如果要解决这个问题, 我们可以将一个函数作为参数传进去, 比如
   • 子组件

   • methods: {
       getParentInfo() {
         this.$emit('getInfo', (name) => {
           console.log('这次拿到了 ', name);
         });
       }
     }
     

   • 父组件: 在接收参数的同时调用

   • methods: {
       getInfoCallback(callback) {
         callback(this.name);
       }
     }
     

   •