Question

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

干杯。

Answer 1

我不知道是否能够从父级$emit内部的子级mount()监听mount()的数据。您需要将侦听器绑定到父模板中的子组件。使用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>

Answer 2

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

Answer 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

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

3 个答案: