获得$emit对应函数的返回值
- 大概的问题就是, 子组件
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
属性, 而是子组件实例
-
- 如果要解决这个问题, 我们可以将一个函数作为参数传进去, 比如
- 子组件
-
methods: { getParentInfo() { this.$emit('getInfo', (name) => { console.log('这次拿到了 ', name); }); } }
- 父组件: 在接收参数的同时调用
-
methods: { getInfoCallback(callback) { callback(this.name); } }