vue元件，元件是一個可複用的功能模組，即將具有相同功能的模組抽取成一個元件，在需要的地方引用即可，這體現了程式碼封裝的思想，下面看一下元件是如何實現： // 定義一個名為 button-counter 的新元件 Vue.component('button-counter', {   data: function () {     return {       count: 0     }   },   template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' })

元件是可複用的 Vue 例項，且帶有一個名字：在這個例子中是 <button-counter>。我們可以在一個通過 new Vue 建立的 Vue 根例項中，把這個元件作為自定義元素來使用：

<div id="components-demo">   <button-counter></button-counter> </div> 如果使用webpack或者sublime工具開發時可以通過import元件，對元件的使用以及props元件傳值。具體如下： 元件 <template>     <div>我是一個元件</div> </template> <script type="text/javascript">     export default {         props: {//接收父元件傳遞的值             father: [//引數名稱                 type: Object//引數型別，有多種：Number等，具體參考api             ]         }     };//暴露，讓引用元件可以查詢到 </script> <style type="text/css"></style> 引用方式通過 import myComponents from '/子元件路徑' 引用後即可在使用 <div>   <myComponents :father="father"></myComponents>//：father為傳遞father給子元件 </div>

<script type="text/javascript">     import myComponents from 'myComponents.vue'     export default {        components: {//在父元件中引用子元件          myComponents//註冊元件        }     } </script>

而子元件與父元件之間通訊，我們可以呼叫內建的 $emit 方法並傳入事件的名字，來向父級元件觸發一個事件，例項： 在子元件中： <template>     <div>我是一個元件</div>     <div @click="click">向父元件傳送訊息</div>//這裡也可以直接使用$emit('target')的方式向父元件傳遞訊息 </template> <script type="text/javascript">     export default {         methods: {             click() {                 this.$emit('target');//使用$emit向父元件定義為target的目標中傳遞訊息             }         }     } </script>

在父元件中： <div>   <myComponents @target="targetMethod"></myComponents>//targetMehod為在父元件中定義的方法，也可以是一個表示式 </div> <script type="text/javascript">     export default {         methods: {             targetMethod() {                 console.log('接受到子元件的訊息')             }         }     } </script>