javascript - 视觉 : Accessing data from an unmounted component

Question

我有一个问题，我想从子组件中检索数据，但父组件需要使用该数据，在子组件安装之前。

我爸妈长这样

<template>
    <component :is="childComp" @mounted="setData"/>
</template>
<script>
    data : {
        childComp : null,
        importantData : null
    },
    methods : {
        addComponent : function() {
            this.prepareToAdd(this.importantData);
            this.childComp = "componentA"; //sometimes will be other component
        },
        setData : function(value) {
            this.importantData = value;
        },
        prepareToAdd : function(importantData){
            //something that has to be run before childComp can be mounted.
        }
    }
</script>

我的 child (或者更确切地说，所有潜在的 child )会包含这样的东西:

<script>
    data : {
        importantData : 'ABC',
    },
    created: function() {
        this.$emit('mounted', this.importantData);
    },
</script>

这显然行不通 - importantData 是在安装 childComponent 时设置的，但是 prepareToAdd 首先需要该数据。

在挂载之前，是否有另一种方法可以访问子组件并访问其数据？

Answer 1

您可以使用 $options存储您的重要数据并使其在 beforeCreate 中可用。您还可以使用它来初始化 data 项目，并且您可以在 created 中发出 data 项目(您不必从 $options 在 created 中发出，我只是指出可以完成的两件事)。 $options 值本身是 react 性的(令我惊讶的是)并且可以像任何 data 项目一样使用，还有一个额外的好处是它在其他 之前可用数据项。

new Vue({
  el: '#app',
  methods: {
    doStuff(val) {
      console.log("Got", val);
    }
  },
  components: {
    theChild: {
      template: '<div>Values are {{$options.importantData}} and {{otherData}}</div>',
      importantData: 'abc',
      data() {
        return {
          otherData: this.$options.importantData
        };
      },
      beforeCreate() {
        this.$emit('before-create', this.$options.importantData);
      },
      created() {
        this.$emit('on-created', this.otherData + ' again');
        // It's reactive?!?!?
        this.$options.importantData = 'changed';
      }
    }
  }
});

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <the-child @before-create="doStuff" @on-created="doStuff"></the-child>
</div>