Vue.js「擴展」用法的正確方法是什麼？

試驗Vue.js 2我做了一個小項目並嘗試導入一個組件，但瀏覽器中有一個空白頁面。我想，以使用「擴展」來嘗試這個例子：https://jsfiddle.net/xmqgnbu3/1/Vue.js「擴展」用法的正確方法是什麼？

所以我main.js看起來是這樣的：

import Vue from 'vue' 
import WorkZone from './components/WorkZone.vue' 
import App from './App.vue' 

var vm = new Vue({ 
    el: '#app', 
    components: { 
     'work-zone': WorkZone, 
     'app': App 
    } 
});

我App.vue文件：

<template> 
    <div id="app"> 
    <work-zone></work-zone> 
    </div> 
</template> 

<script> 
    import WorkZone from './components/WorkZone.vue'; 
    export default { 
     name: 'app', 
     components: { 
      'work-zone': WorkZone 
     }, 
     data() { 
      return {} 
     }, 
     methods: {} 
    }; 
</script>

我的工作區域.vue文件：

var WorkZone = Vue.extend({ 
    template: ` 
    <div id="work-zone"> 
     <div id="wrapper"></div> 
    </div>`, 
    data() { 
     return { 
      tabItems: [{ 
       title: 'Главная страница', 
       project: 'Текст главная страница', 
       done: false, 
      }], 
     }; 
    }, 
    methods: { 
     createTab: function(newTab) { 
      this.tabItems.push(newTab); 
     } 
    } 
});

想法是，稍後會有一個帶按鈕的邊欄。每個按鈕都會在工作區或頁面上的任何其他組件中添加一個元素。我想要這個函數（例如「function addElem（）」）可以在任何組件中訪問。

來源

2017-04-18 rinatoptimus

是否元素與ID，'app'，存在於頁main.js上運行？ – Bert

出現id =「app」的根組件。它是空的。現在我試着添加 Vue.component（'work-zone'，WorkZone）; 到WorkZone.vue，改變main.js到 VAR BIZON =新的Vue（{ EL： '#APP'，模板： ''，組件：{ 應用， '工作區'：工作區域 }， }）; WorkZone出現，但出現錯誤無法裝入組件：未定義模板或渲染函數。 – rinatoptimus

你可以顯示頁面的HTML嗎？其次，在這種情況下，你不需要'Vue.extend'。你的WorkZone.vue文件應該看起來像你的App.vue文件，帶有模板和腳本部分。 – Bert

main.js

var WorkZone = Vue.extend({ 
     template: ` 
     <div id="work-zone"> 
      <div id="wrapper"> 
      <ul v-for="item in tabItems"> 
      <li>{{ item.title }}</li> 
      </ul> 
      <button @click="createTab({title: 'Hello', project: 'World', done: false})">Create Tab</button> 
      </div> 
     </div>`, 
     data() { 
      return { 
       tabItems: [{ 
        title: 'Главная страница', 
        project: 'Текст главная страница', 
        done: false, 
       }], 
      }; 
     }, 
     methods: { 
      createTab: function(newTab) { 
       this.tabItems.push(newTab); 
      } 
     } 
    }); 

    var vm = new Vue({ 
     el: '#app', 
     components: { 
      'work-zone': WorkZone 
     } 
    });

您的HTML文件：

<div id="app"> 
    <work-zone></work-zone> 
</div>

來源

2017-10-24 14:01:19

Vue.js「擴展」用法的正確方法是什麼？

回答

相關問題