不在 parent 中的动态 vue.js 组件

Question

我想将 Vue 的动态组件 (http://vuejs.org/guide/components.html#Dynamic_Components) 用于 child object 而不是 parent object 中定义的组件.例如：

new Vue({
  el: 'body',
  components: {
    'post': require('./post')
});

// post.js

module.exports = {
  inherit: true,

  data: function () {
      return {
          currentView: 'create-post'
      }
  },
  components: {
     'create-post': require('./create-post'),
     'update-post': require('./update-post')
  }
}

<component is="{{ post.currentView }}"></component>

或更好

<post is="{{ currentView }}"></post>

据我所知，parent 是唯一可以访问 <component> 标签的标签，因此不可能使用第二级 child。是我对结构的考虑不正确，还是有办法实现上述目标？

Answer 1

所以，实习生帮我解决了这个……呃，尴尬。

我上面的问题只是范围问题，这些最佳实践描述了如何解决它：http://vuejs.org/guide/best-practices.html#Component_Scope

本质上，我只需要一个额外的视图层组件 "post" 以使其子组件具有适当的范围。显示比描述更容易：

new Vue({
  el: 'body',
  components: {
    'post': require('./post')
});

// post.js
module.exports = {
  inherit: true,

  template: document.querySelector('#post'),

  data: function () {
      return {
          currentView: 'create-post'
      }
  },
  components: {
     'create-post': require('./create-post'),
     'update-post': require('./update-post')
  }
}

// create-post.js
module.exports = {
  inherit: true,
  template: document.querySelector('#create-post'),
}

// update-post.js
module.exports = {
  inherit: true,
  template: document.querySelector('#update-post'),
}

// main.html
<html>
  <body>
    <post></post>
  </body>
</html>

// post.html
<script id="post" type="x-template">
  <component is="%% currentView %%"></component>
</script>

// create-post.html
<script id="create-post" type="x-template">
  <h1>Create a post</h1>
</script>

// update-post.html
<script id="create-post" type="x-template">
  <h1>Update a post</h1>
</script>

不在 parent 中的动态 vue.js 组件

Dynamic vue.js components that aren't in the parent

vue.js