技術標籤：Vuevue

元件的本質可以說是一個可複用的vue例項，所以一個元件建立後就可以在各個地方多次複用，但元件中的data資料應該是互不影響的。

<div id="app">
    <!--現在元件複用了三次-->
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>
</div>
<template id="cpn">
    <div>
        <h2>{{msg}}</h2>
        <button @click="msg++">增加</button>
    </div>
</template>

Vue.component('cpn',{
        template:cpn,
        //當建立了多個元件例項，每次複用都會返回新的物件，記憶體地址是不一樣的
        data(){
            return {
                msg:0
            }
        }
    })
 

結果：

為了實現這一目標，vue利用了js的特性，data資料是以函式返回值的形式來定義，複用一次元件，就會返回一份新的data物件，於是每個元件例項都有了自己的作用域。如果data寫成物件形式，因為記憶體地址是一樣的，一個數據變了，其他地方都會變。