javascript - Vue:从未安装的组件访问数据

我有一个问题要从子组件检索数据，但是父级需要在挂载子组件之前使用该数据。

我父母长这样

<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>

我的孩子（或更确切地说，所有潜在的孩子）将包含以下内容：

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

这显然不起作用-挂载childComponent时设置了importantData，但是prepareToAdd首先需要该数据。

在安装子组件之前，还有其他方法可以访问子组件并访问其数据吗？

最佳答案

您可以使用$options存储重要数据，并在beforeCreate中使用它们。您还可以使用它来初始化data项目，并且可以在data中发出created项目（您不必从$options进行初始化即可在created中发出，我只是指出可以完成的两件事）。 $options值本身是反应性的（令我惊讶），可以像任何data项一样使用，其附加好处是它可以在其他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>

关于javascript - Vue:从未安装的组件访问数据，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49054220/