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>

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

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

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

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

Answer 1

您可以使用$options存储重要数据，并将其显示在beforeCreate中。您还可以使用它初始化data项，然后您可以在data中发出created项（您不必从$options初始化以发出created，我只是指出了两件可以做的事情。 $options值本身就是被动的（令我惊讶）并且可以像任何data项一样使用，并且具有在其他data项之前可用的额外好处。

＆＃13;

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';
      }
    }
  }
});

＆＃13;

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

＆＃13;

Answer 2

我的坏:(

我们无法在beforeCreated（）钩子里面获取数据。

<击> 使用beforeCreate（）钩子而不是created（）钩子：

beforeCreate: function() { this.$emit('mounted', this.importantData); },

<击>

我们可以使用观察者或计算选项，所以现在你的父组件会显示：

data: { childComp: null, importantData: null, isDataSet: false }, methods: { addComponent: function() { this.prepareToAdd(this.importantData); this.childComp = "componentA"; //sometimes will be other component }, setData: function(value) { this.importantData = value; this.isDataSet = true; }, prepareToAdd: function(importantData) { //something that has to be run before childComp can be mounted. } }, watch: { isDataSet: function(newValue, oldValue) { if (newValue) { this.addComponent(); } } }

我建议使用计算方法，因为它会缓存结果。必须执行异步代码时使用watcher。

Vue：从未安装的组件访问数据

2 个答案: