Vue基礎語法（三）局部組件和全局組件

組件

''' 1.根組件：new Vue()建立的組件，通常不明確自身的模板，模板就採用掛載點 2.局部組件: local_component = {} 2.全局組件： Vue.component({}) '''

''' 1.一個組件就是一個vue實例 2.組件具備自身的template 3.組件的模板只能有一個根標籤 4.子組件的data具備做用域，以達到組件的複用，每一個組件的數據獨有 '''

變量什麼的關鍵字

''' 沒有關鍵字：全局做用域 var：沒有塊級，有局部做用域 let：有塊級，有局部做用域 const：有塊級，有局部做用域，是常量 '''

局部組件

第三步
<div id="app">
    <!--html代碼不區分大小寫，該名字使用子組件是不合法的命名-->
    <!--<localTag></localTag>-->
    <!--<local></local>-->

    <!--組件的複用-->
    <local-tag></local-tag>
    <local-tag></local-tag>
</div>


<script> 第一步 var localTag = { template: '<div class="local" style="color: orange" @click="btnAction">{{ name }}組件</div>', // 子組件的數據與方法由子組件自身提供 data: function () { return { name: '局部' } }, methods: { btnAction: function () { alert('你丫點我了') } } }; 第二步 new Vue({ el: "#app", components: { // local: localTag // 'local-tag':localTag // localTag: localTag, // 1.js的駝峯命名(localTag)對應的是html的鏈接命名(local-tag) // 2.key與value的變量名一致，能夠簡寫localtag <div> localTag localtag2 } }); </script>

全局組件

<div id="app">
    <global-tag></global-tag>
    <global-tag></global-tag>
</div>
<script> Vue.component('global-tag', { template: '<div @click="btnClick">{{ name }}組件被點了{{ n }}下</div>', // 組件被複用一次，就會產生一個新的局部做用域，使用一套數據 data: function(){ return { n: 0, name: "全局" } }, methods: { btnClick: function () { this.n += 1 } } }); new Vue({ el: "#app" }) </script>