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
        }
    });
</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>