从子挂载发出事件并从父挂载访问答案

【问题标题】：Emit an event from child mount and access from parent mount从子挂载发出事件并从父挂载访问
【发布时间】：2019-02-17 20:05:12
【问题描述】：

假设我有一个名为child 的组件。我有我想在我的父组件中访问的数据。我想在childs 挂载：this.$emit('get-data', this.data) 中发出一个事件，然后最终在父挂载中检索它。这可以做/实用吗？如果是如何实现呢？如果没有，有什么更好的选择？

干杯。

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

我不知道是否能够在父级 mount() 中侦听来自子级 mount() 的 $emit'd 数据。您需要将侦听器绑定到父模板中的子组件。使用SFC的典型示例

Child.vue：

export default{
   name: 'child',
   mount(){
     this.$emit('get-data', this.data);
   }
}

Parent.vue：

<template>
   <div>
      <child v-on:get-data="doSomething"></child>
   </div>
</template>
<script>
import Child from './Child';
export default{
   name: 'parent',
   components: { Child },
   methods(){
     doSomething(data){
       //Do something with data.
     }
   }
}
</script>

【讨论】：

【解决方案2】：

将数据从子级传递给父级的另一种方法是作用域槽。我认为这比您的情况下的事件更合适（仅传递与真实事件无关的数据）。但我不确定我是否完全理解你。

【讨论】：

【解决方案3】：

我会使用created 挂钩而不是mounted，因为您只需要访问响应式数据和事件。您可以发出整个子组件，然后根据需要钻取其数据。

模板

<child-component @emit-event="handleEvent">
  {{ parentData }}
</child-component>

孩子

Vue.component('child-component', {
  template: '<div><slot/></div>',
  data() {
    return {
      childData: 'childData', 
    }
  },
  created() {
    this.$emit('emit-event', this)
  }
})

父母

new Vue({
  el: "#app",
  data: {
    parentData: undefined,
  },
  methods: {
    handleEvent({ childData }) {
      this.parentData = childData
    }
  }
})

看看这个fiddle

【讨论】：