Vue.js "extend"の正しい使い方は何ですか？

Question

Vue.jsを使った実験2私は少し​​プロジェクトを作り、コンポーネントをインポートしようとしましたが、ブラウザに空のページがあります。私はこの例を試すために使う "拡張" したい：

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> 

マイWorkZone https://jsfiddle.net/xmqgnbu3/1/

は、だから私のmain.jsは次のようになります.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（）"）をどのコンポーネントでもアクセスできるようにしたいと思います。

Answer 1

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ファイル：ページmain.jsが稼働上

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