Javascript vuejs：我们可以通过动态组件模式为异步组件提供支持吗<；组件：is="；“类型”；opts=”选项；“异步组件”>；？

我正在努力实现以下vuejs应用程序场景：动态组件+异步组件模式。 一切正常，但只剩下一个问题： 如何访问通过传递的道具数据

<component :is="asyncComp" opts="someDataForAsyncComp">

请看现场小提琴：

代码如下：

    <div id="app">
by dynamic Component:
  <component
    v-for="item in items"
    :is="item.component"
    :opts="item.options">    <!-- can we give props data to async component here? --> 
  </component><div>

按动态组件：

以下是js部分：

    Vue.component('node3', function (resolve, reject) {
  setTimeout(function () {
    resolve({
      template: '<div>I am async node3!</div>',
      created: function(){
         console.log(this.opts);  // can we access props transferred into async component via component
      }
    })
  }, 1000)
})
Vue.component('node', {
  template: '<div>must be static tpl!</div>',
  props: ['opts'],
  computed: {
    log: function() {
      return JSON.stringify(this.opts);
    }
  },
  data() {
    return {}
  },
  created: function(){
  console.log(this.opts);
  }
});

Vue.component('node2', {
  template: '<div>node2</div>',
  props: ['opts'],
  computed: {
    log: function() {
      return JSON.stringify(this.opts);
    }
  },
  data() {
    return {}
  },
  created: function(){
    console.log("dfdsfsdfa");
  }
});


new Vue({
  el: '#app',

  data() {
    return {
      newItem: {
        component: "",
        options: ""
      },
      items: [{
        component: "node",
        options: {
           type: "node",
           tpl: "<div>node: {{ opts }} {{ log }}</div>"
        }
      }, 
      {
        component: "node2",
        options: {
            type: "node2",
          tpl: "<div>node2: {{ opts }} {{ log }}</div>"
        }
      },
       {
        component: "node3",
        options: {
            type: "node3",
          tpl: "<div>node3: {{ opts }} {{ log }}</div>"
       }
      }
      ]
    };
  },
  computed: {
    isButtonDisplayed() {
      return this.newItem.component && this.newItem.options
    }
  },
  methods: {
    addItem() {
      this.items.push(this.newItem);
      this.newItem = {
        component: "",
        options: ""
      }
    }
  }
});

Vue.component（'node3'，函数（解析、拒绝）{
setTimeout（函数（）{
决心({
模板：“我是异步节点3！”，
已创建：函数（）{
console.log（this.opts）；//我们可以通过组件访问传输到异步组件中的道具吗
}
})
}, 1000)
})
Vue.component（'节点'{
模板：“必须是静态tpl！”，
道具：[选择]，
计算：{
日志：函数（）{
返回JSON.stringify（this.opts）；
}
},
数据（）{
返回{}
},
已创建：函数（）{
console.log（this.opts）；
}
});
Vue.component（'node2'{
模板：“node2”，
道具：[选择]，
计算：{
日志：函数（）{
返回JSON.stringify（this.opts）；
}
},
数据（）{
返回{}
},
已创建：函数（）{
console.log（“dfdsfsdfa”）；
}
});
新Vue({
el:“#应用程序”，
数据（）{
返回{
新项目：{
组成部分：“，
选项：“
},
项目：[{
组件：“节点”，
选项：{
类型：“节点”，
tpl：“节点：{{opts}}{{log}”
}
}, 
{
组件：“node2”，
选项：{
键入：“node2”，
tpl：“节点2:{{opts}}{{log}”
}
},
{
组件：“node3”，
选项：{
键入：“node3”，
tpl：“节点3:{{opts}}{{log}”
}
}
]
};
},
计算：{
isButtonDisplayed（）{
返回this.newItem.component&&this.newItem.options
}
},
方法：{
附加项（）{
this.items.push（this.newItem）；
this.newItem={
组成部分：“，
选项：“
}
}
}
});

我在JSFIDLE中添加了三行代码：

// dynamic component
var _this = this
this.$nextTick(()=>{console.log(JSON.stringify(_this.$options._parentVnode.data.attrs.opts))})
// static component
console.log(JSON.stringify(this.$options.propsData.opts))

---

不过，我认为这不是最好的方法，最好问问埃文。

谢谢你热情的反馈~！您添加的行适用于组件“node”（它是普通组件），但不适用于组件“node3”（它是异步组件）。你能检查一下吗？