組件

什么是組件？我所理解的組件，是和視圖相關(guān)的，比如一個(gè)頁面，可以分成多個(gè)模塊，那么每一個(gè)模塊就可以看成是一個(gè)組件，當(dāng)然了，每個(gè)組件中有各自的功能。

組件分為全局組件和局部組件。

全局組件：

全局組件是在構(gòu)造器外部定義的

<div id="app">
    <nav-bar></nav-bar>
</div>

//定義全局組件
Vue.component('nav-bar', {
    template: "<div>我是子組件</div>"
})

new Vue({
    el: "#app",
    data: {
        title: "全局組件"
    }
})

局部組件

局部注冊(cè)的組件，只能在局部作用域中注冊(cè)使用，其他作用域沒用。

<div id="app">
    <h2>{{ title }}</h2>
    <nav-bar></nav-bar>
</div>

new Vue({
    el: "#app",
    data: {
        title: "局部組件"
    },//注冊(cè)局部組件components是加‘s’的
    components: {
        'nav-bar':{
            template: "<div>這是局部組件</div>"
        } 
    }
})

父子組件之間的傳值

父傳子通過props屬性

組件的作用域是獨(dú)立的，我們不能夠在子組建中直接使用父組件中的值。要使用父組件的值，需要通過props屬性傳遞數(shù)據(jù)。

在父組件中自定義一個(gè)屬性，并將要傳遞的值賦值給該屬性（相當(dāng)于一個(gè)載體），在子組件中通過props接受，數(shù)組中就是相應(yīng)的‘載體’

<div id="app">
    <h1>{{ title }}</h1>
    <nav-bar address="China"></nav-bar>
</div>

//定義組件
var navBar = {
    template: "<div>我來自{{ address }}</div>",
    //接受父組件傳遞過來的值
    props: ['address']
}

new Vue({
    el: "#app",
    data: {
        title: '父組件向子組件傳值'
    },
    components: {
        navBar
    }
})

屬性中帶‘—’的情況

比如：

<div id="app">
    <nav-bar my-name="cuiliang"></nav-bar>
</div>

在子組件中通過props接受的時(shí)候，需要轉(zhuǎn)換成駝峰式命名。

var navBar = {
    template: "<div>我叫{{ myName }}</div>",
    props: ['myName']
}

new Vue({
    el: "#app",
    components: {
        navBar
    }
})

有坑，盡量少用或不用！

動(dòng)態(tài)的props

在子組件中接收父組件動(dòng)態(tài)的數(shù)據(jù)，需要用v-bind綁定，當(dāng)父組件的值變化時(shí)，子組件相應(yīng)的跟著變化。

在父組件中綁定message屬性

<div id="app">
    <input v-model = 'message'>
    <nav-bar v-bind:message = 'message'></nav-bar>
</div>

var navBar = {
    template: "<div>你好啊怎么說：{{message}}</div>",
    props:['message']
}

new Vue({
    el: "#app",
    data: {
        message: '雷猴啊'
    },
    components: {
        navBar
    }
})

字面量

<!-- 傳遞了一個(gè)字符串 "1" -->
<nav-bar count="1"></nav-bar>

因?yàn)樗且粋€(gè)字面 prop ，值是字符串 "1" 而不是number。如果想傳遞一個(gè)實(shí)際的number，需要使用 v-bind ，從而讓它的值被當(dāng)作 JavaScript 表達(dá)式計(jì)算：

<!-- 傳遞了一個(gè)字符串 "1" -->
<nav-bar :count="1"></nav-bar>

子傳父

父組件通過props傳值，那子組件怎么傳給父，使用自定義事件。

父組件中通過v-on接收

<div id="app">
    <h2>{{ title }}</h2>
    <div>{{ count }}</div>
    <hr>
    <!--count自定義事件接收-->
    <nav-bar v-on:getnum='result'></nav-bar>
</div>

子組件中通過$emit發(fā)射事件

//定義子組件
var navBar = {
        template: "<div>我是子組件<div>{{ num }}</div><button @click = 'add'>add</button></div>",
        //這里是data函數(shù)
        data(){
            return{
                num: 0
            }  
        },
        methods: {
            add(){
                this.num ++
                this.$emit('getnum', this.num)//參數(shù)2是傳遞的值
            }
        }
    }

    new Vue({
        el: "#app", 
        data: {
            title: "子組件向父組件傳值",
            count: 0
        },
        components: {
            navBar
        },
        methods: {
            //參數(shù)是傳遞過來的值
            result(val){
                this.count = val
            }
        }
    })

component標(biāo)簽

<component></component>是vue框架自定義的標(biāo)簽，作用就是讓我們可以根據(jù)不同的狀態(tài)選擇不同的組件。

1、在模板中的component標(biāo)簽中綁定一個(gè)‘is’屬性，通過點(diǎn)擊按鈕改變select屬性的值，進(jìn)而選擇不同的組件。

<div id ="#app">
    <component :is = 'select'></component>
    <button @click = 'changeComponent'>點(diǎn)擊改變組件</button> 
</div>

2、定義三個(gè)組件

var componentA = {
    template: "<div>這是組件A</div>"
}
var componentB = {
    template: "<div>這是組件B</div>"
}
var componentC = {
    template: "<div>這是組件C</div>"
}

new Vue({
    el: "#app",
    data: {
        select: componentA
    },
    methods: {
        changeComponent(){
            let select = this.select;
            if(select==componentA){
                select = componentB
            } else if (select == componentB){
                select = componentC
            } else {
                select = componentA
            }
        }
    },//注冊(cè)組件
    components: {
        componentA, 
        componentB,
        componentC
    }
})