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

超、凢脫俗 2024-05-24 04:17 69阅读 0赞

### 获得$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>
     *  ![请添加图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5bqH6ICz5ouJ5rW36I6x_size_18_color_FFFFFF_t_70_g_se_x_16]
     *  可以看到, `$emit` 返回的并不是父组件的 `name` 属性, 而是子组件实例
2.  如果要解决这个问题, 我们可以将一个函数作为参数传进去, 比如
    
     *  子组件
     *      methods: {
                    
              getParentInfo() {
                    
                this.$emit('getInfo', (name) => {
                    
                  console.log('这次拿到了 ', name);
                });
              }
            }
     *  父组件: 在接收参数的同时调用
     *      methods: {
                    
              getInfoCallback(callback) {
                    
                callback(this.name);
              }
            }
     *  ![请添加图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5bqH6ICz5ouJ5rW36I6x_size_18_color_FFFFFF_t_70_g_se_x_16 1]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5bqH6ICz5ouJ5rW36I6x_size_18_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/02037be1fa0742a8b4281c185526ab88.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5bqH6ICz5ouJ5rW36I6x_size_18_color_FFFFFF_t_70_g_se_x_16 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/394a69c2384e441080a5e5825a294eb0.png