什麼是元件以及如何定義元件

Vue 中的元件就像小部件。它們允許我們編寫具有所需行為的可重用自定義元素。

它們只是可以包含根或任何 Vue 例項可以包含的任何/所有選項的物件，包括要呈現的 HTML 模板。

元件包括：

• HTML 標記：元件的模板
• CSS 樣式：HTML 標記的顯示方式
• JavaScript 程式碼：資料和行為

這些可以分別寫在單獨的檔案中，也可以作為帶有 .vue 副檔名的單個檔案。以下示例顯示了兩種方式：

.VUE - 作為元件的單個檔案

<style>  
    .hello-world-compoment{  
        color:#eeeeee;  
        background-color:#555555; 
    }  
</style>  

<template>
    <div class="hello-world-component">
        <p>{{message}}</p>
        <input @keyup.enter="changeName($event)"/>
    </div>
</template>

<script>
    export default{            
        props:[ /* to pass any data from the parent here... */ ],   
        events:{ /* event listeners go here */},
        ready(){
            this.name= "John";
        },
        data(){
           return{
              name:''
           }
        },
        computed:{
            message(){
                return "Hello from " + this.name;
            }
        },
        methods:{
            // this could be easily achieved by using v-model on the <input> field, but just to show a method doing it this way.
            changeName(e){
                this.name = e.target.value;
            }
        }  
    }
</script>  

單獨的檔案

hello-world.js - 元件物件的 JS 檔案

export default{
    template:require('./hello-world.template.html'),
    props:[ /* to pass any data from the parent here... */ ],  
    events:{ /* event listeners go here */ },
    ready(){
        this.name="John";
    },
    data(){
        return{
            name:''
        }
    },
    computed:{
        message(){
            return "Hello World! from " + this.name;
        }
    },
    methods:{
        changeName(e){
            let name = e.target.value;
            this.name = name;
        }
    }
}  

你好，world.template.html

<div class="hello-world-component">
    <p>{{message}}</p>
    <input class="form-control input-sm" @keyup.enter="changeName($event)">
</div>  

你好，world.css

 .hello-world-compoment{  
    color:#eeeeee;  
    background-color:#555555; 
}    

這些示例使用 es2015 語法，因此需要 Babel 將它們編譯為 es5 用於舊版瀏覽器。
將需要 Babel 以及 Browserify + vueify 或 Webpack + vue-loader 來編譯 hello-world.vue。

現在我們已經定義了 hello-world 元件，我們應該將它註冊到 Vue。

這可以通過兩種方式完成：

註冊為全域性元件
在 main.js 檔案（應用程式的入口點）中，我們可以使用 Vue.component 在全域性註冊任何元件：

import Vue from 'vue'; // Note that 'vue' in this case is a Node module installed with 'npm install Vue'
Vue.component('hello-world', require('./hello-world');  // global registeration

new Vue({
    el:'body',

    // Templates can be defined as inline strings, like so:
    template:'<div class="app-container"><hello-world></hello-world></div>'
});  

或者在父元件或根元件中本地註冊它

import Vue from 'vue'; // Note that 'vue' in this case is a Node module installed with 'npm install Vue'
import HelloWorld from './hello-world.js';  

new Vue({
    el:'body',
    template:'<div class="app-container"><hello-world></hello-world></div>",

    components:{HelloWorld}  // local registeration
});  

全域性元件可以在 Vue 應用程式中的任何位置使用。

本地元件僅可用於與其註冊的父元件。

片段元件
你可能會收到控制檯錯誤，告訴你由於你的片段元件而無法執行某些操作。要解決此類問題，只需將元件模板包裝在單個標記內，如 <div>。