Vue.js：在初始页面加载期间从 javascript 中的另一个组件加载组件

Question

我是 Vue.js 的新手，所以请耐心等待。

尝试使用 Vue.js 组件创建一个页面，该页面将包含其他子组件。设法创建和加载第一个外部组件，但我无法加载子/内部组件。主要项目是使用 python Django 制作的，我的代码如下。使用import 指令进行了几次尝试，但总是在javascript 控制台中以Uncaught SyntaxError: Unexpected token import 消息结束。谁能帮我弄清楚我做错了什么？

---

Django 模板：

teleconsultoria/templates/teleconsultoria/registro_consultoria_0800.html

...
          <div class="col s12 bibliografia">
             <div class="row" id="caixa-de-referencias">
               <div class="input-field col s6">
                 <textarea id="textarea-bibliografia" class="materialize-textarea"></textarea>
                 <label for="textarea-bibliografia">Bibliografia</label>
               </div>

               <list items=items></list>

             </div>
           </div>
...

 <script src="https://unpkg.com/vue"></script>
 <script src="{% static 'core/js/componentes_vue/list.js' %}"></script>
 <script>
 var appts2 = new Vue({
   el: '#caixa-de-referencias',
   data: {
     items: [
       'referenciA 1',
       'referenciA 2',
     ]
   }
 });
 </script>

---

项目列表组件：

core/static/core/js/componentes_vue/list.js

import collection_item from './collection_item.js';

var list = Vue.component('list', {
  props: ['items'],
  template: `
    <div class="col s6">
      <div class="search">
        <div class="search-wrapper">
          <input id="search-bibliografia" placeholder="Referências (sugestões)">
          <i class="material-icons">search</i>
        </div>

        <ul class="collection with-header search-results">
          <li class="collection-header"><p>Sugestões baseadas na "hipotese"</p></li>
          <collection-item v-for="item in items"></collection-item>
        </ul>
      </div>
    </div>`
});

---

项目组件：

core/static/core/js/componentes_vue/collection_item.js

var collectionItem = Vue.component('collection-item', {
  props: ['texto'],
  template: `
    <li class="collection-item">
      <div>
        <a href="#!" class="link-inserir tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am a tooltip">
          {{ texto }}
        </a>
        <a href="#!" class="secondary-content" target="_blank">
          <i class="material-icons">launch</i>
        </a>
      </div>
    </li>`
});

Answer 1

删除

import collection_item from './collection_item.js';

来自 list.js。

然后将 collection_item.js 添加到您的页面。

<script src="https://unpkg.com/vue"></script>
<script src="{% static 'core/js/componentes_vue/collection_item.js' %}"></script>
<script src="{% static 'core/js/componentes_vue/list.js' %}"></script>
 <script>
 var appts2 = new Vue({
   el: '#caixa-de-referencias',
   data: {
     items: [
       'referenciA 1',
       'referenciA 2',
     ]
   }
 });
 </script>

Vue.component全局公开一个组件。

这将使您摆脱当前的错误。您发布的模板中似乎还有其他错误。

<list items=items></list>

应该是

<list v-bind:items="items"></list>

<collection-item v-for="item in items"></collection-item> 中还应该有一个texto 属性。另外，Vue 会在开发模式下报错，当你迭代一个组件时有no key。