Vue組件

一、組件介紹

• 組件都具有模板,template
• new Vue()創建的是根組件
• 組件與實例一一對應,創建一個實例就是創建了一個組件,同理創建一個組件就相當於創建了一個實例
• 根組件如果不書寫自身模板,那麽模板就采用掛載點,如果顯式書寫模塊,就會替換掛載點,但根組件必須擁有掛載點
• 子組件都具有自身模板,根組件是所有子組件的父級(一級父級....n級父級)

二、局部組件

<div id="app">
    <!-- 連接語法：提倡用 - 鏈接 -->
    <local-tag></local-tag>
    <local-tag></local-tag>
</div>
<script>
    //一個滿足VUE語法規則的對象就是一個組件
    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>
 

三、全局組件

<div id="app">
    <global-tag></global-tag>
    <global-tag></global-tag>
</div>
<script>
    // 用Vue.component("組件名", {})來創建全局組件
    // 全局組件附屬於Vue實例,可以不需要註冊就可以使用
    Vue.component(‘global-tag‘, {
        data () {
            return {
                count: 0
            }
        },
        template: ‘<button @click="btnAction">全局{{ count }}</button>‘,
        methods: {
            btnAction () {
                this.count ++
            }
        }
    })
    new Vue({
        el: "#app"
    })
</script>
 

四、父組件傳遞數據給子組件

• 通過綁定屬性的方式進行數據傳遞

<div id="app">
    <global-tag :sup_data1=‘sup_data1‘ :supData2=‘sup_data2‘></global-tag>
</div>
<script type="text/javascript">
    // 1.給在父組件中出現的子組件名定義標簽的全局屬性
    // 2.在父組件中給全局屬性賦予子組件需要的數據
    // 3.在子組件內部,通過props拿到標簽中的全局屬性名
    Vue.component(‘global-tag‘, {
        props:[‘sup_data1‘, ‘supdata2‘],
        template: ‘<div>{{ sup_data1 }} {{ supdata2 }}</div>‘
    })
    new Vue({
        el: ‘#app‘,
        data: {
            sup_data1: ‘數據1‘,
            sup_data2: ‘數據2‘
        }
    })
</script>
 

五、子組件傳遞數據給父組件

• 通過發送事件請求的方式進行數據傳遞

<div id="app">
    <global-tag @send_action=‘receiveAction‘></global-tag>
</div>
<script type="text/javascript">
    // 1.數據由子級提供
    // 2.在子級中通過某個事件對外(this.$emit("事件名", ...args))發送一個事件
    // 3.在父級的模板中,子組件名上,為發送的事件綁定一個回調方法,該回調方法由父級來完成實現體
    // 4.在實現體中就可以拿到回調參數
    Vue.component(‘global-tag‘, {
        data () {
            return {
                sub_data1: "數據1",
                sub_data2: ‘數據2‘
            }
        },
        template: ‘<div @click="clickAction">發生</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>

六、父子組件實現todoList

<div id="app">
    <div>
        <input type="text" v-model="val">
        <button type="button" @click="submitMsg">提交</button>
    </div>
    <ul>
        <todo-list v-for="(v, i) in list" :key="i" :v="v" :i="i" @delect_action1="delect_action2"></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_action1", 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_action2(index) {
                this.list.splice(index, 1)
            }
        }
    })
</script>

DAY67-前端入門-javascript（十三） vue03