組件

• 每一個組件都是一個vue實例
• 每個組件均具有自身的模板template，根組件的模板就是掛載點
• 每個組件模板只能擁有一個根標(biāo)簽
• 子組件的數(shù)據(jù)具有作用域，以達(dá)到組件的復(fù)用

1、根組件

<div id="app">    <h1>{{ msg }}</h1></div><script type="text/javascript">    // 通過new Vue創(chuàng)建的實例就是根組件(實例與組件一一對應(yīng),一個實例就是一個組件)    // 每個組件組件均擁有模板,template    var app = new Vue({        // 根組件的模板就是掛載點        el: "#app",        data : {            msg: "根組件"        },        // 模板: 由""包裹的html代碼塊,出現(xiàn)在組件的內(nèi)部,賦值給組件的$template變量        // 顯式書寫模塊,就會替換掛載點,但根組件必須擁有掛載點        template: "<div>顯式模板</div>"    })    // app.$template</script>

2、局部組件

<div id="app">    <local-tag></local-tag>    <local-tag></local-tag></div><script>    var localTag = {        data () {            return {                count: 0            }        },        template: '<button @click="btnAction">局部{{ count }}</button>',        methods: {            btnAction () {                this.count               }        }    }    new Vue({        el: "#app",        components: {            'local-tag': localTag        }    })</script>

3、全局組件

<div id="app">    <global-tag></global-tag>    <global-tag></global-tag></div><script>    Vue.component('global-tag', {        data () {            return {                count: 0            }        },        template: '<button @click="btnAction">全局{{ count }}</button>',        methods: {            btnAction () {                this.count               }        }    })    new Vue({        el: "#app"    })</script>

4、父組件傳遞數(shù)據(jù)給子組件

• 通過綁定屬性的方式進(jìn)行數(shù)據(jù)傳遞

<div id="app">    <global-tag :sup_data1='sup_data1' :supData2='sup_data2'></global-tag></div><script type="text/javascript">    Vue.component('global-tag', {        props:['sup_data1', 'supdata2'],        template: '<div>{{ sup_data1 }} {{ supdata2 }}</div>'    })    new Vue({        el: '#app',        data: {            sup_data1: '數(shù)據(jù)1',            sup_data2: '數(shù)據(jù)2'        }    })</script>

5、子組件傳遞數(shù)據(jù)給父組件

• 通過發(fā)送事件請求的方式進(jìn)行數(shù)據(jù)傳遞

<div id="app">    <global-tag @send_action='receiveAction'></global-tag></div><script type="text/javascript">    Vue.component('global-tag', {        data () {            return {                sub_data1: "數(shù)據(jù)1",                sub_data2: '數(shù)據(jù)2'            }        },        template: '<div @click="clickAction">發(fā)生</div>',        methods: {            clickAction () {                this.$emit('send_action', this.sub_data1, this.sub_data2)            }        }    })    new Vue({        el: '#app',        methods: {            receiveAction (v1, v2) {                console.log(v1, v2)            }        }    })</script>

6、父子組件實現(xiàn)todoList

<div id="app">    <div>        <input type="text" v-model="val">        <button type="button" @click="submitMsg">提交</button>    </div>    <ul>        <!-- <li v-for="(v, i) in list" :key="i" @click="removeMsg(i)">{{ v }}</li> -->        <todo-list v-for="(v, i) in list" :key="i" :v="v" :i="i" @delect_action="delect_action"></todo-list>    </ul></div><script type="text/javascript">    Vue.component("todo-list", {        template: "<li @click='delect_action'><span>第{{ i   1 }}條: </span><span>{{ v }}</span></li>",        props: ['v', 'i'],        methods: {            delect_action () {                this.$emit("delect_action", this.i)            }        }    })        new Vue({        el: "#app",        data: {            val: "",            list: []        },        methods: {            submitMsg () {                // 往list中添加input框中的value                if (this.val) {                    this.list.push(this.val);                    this.val = ""                }            },            delect_action(index) {                this.list.splice(index, 1)            }        }    })</script>