Question

我想将Vue的动态组件（http://vuejs.org/guide/components.html#Dynamic_Components）用于子对象中定义的组件而不是父对象。例如：

for result in results:
    resultData = {'system_name':result.system_name,'system_description':result.system_description,'system_tags':[tag.tag_name for tag in result.tags],'system_date_created':result.system_date_created,'system_hits':result.system_hits}
    response.append(resultData)
print response
return render_template('index.html', searchResults=response)

<table class='table table-hover'> <tr> <th>Name</th> <th>Description</th> <th>Tags</th> <th>Date Created</th> <th>Views</th> </tr> {% for result in searchResults %} <tr> <td>{{ result.system_name }}</td> <td>{{ result.system_description }}</td> <td>Tags</td> <td>{{ result.system_date_created }}</td> <td>{{ result.system_hits }}</td> </tr> {% endfor %} </table>

或更好

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>标签的人，因此使用二级儿童是不可能的。我是否错误地考虑了结构，或者有没有办法完成上述工作？

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>

父级中不包含的动态vue.js组件

1 个答案: