什么是组件以及如何定义组件

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>。