Vue入門指南-07 Vue中的組件(快速上手vue)

時間 2019-11-29

標籤 vue 入門指南組件快速上手简体版

原文原文鏈接

學習組件，咱們首先要了解什麼是組件。組件是Vue能夠複用的Vue實例，且帶有一個名字，在Vue中咱們能夠定義多個組件，在多個不一樣的頁面的中引用多個多不一樣的組件，減小開發的工做量。由於組件是可複用的Vue實例，因此它們與new Vue接收相同的選項，例如：data,computed,watch,methods以及生命週期鉤子等等，僅有的例外是像el這樣根實例特有的選項。vue

建立組件的幾種方式

第一種使用Vue.extend來建立全局的Vue組件

// 建立組件模版對象
let mycomponent = Vue.extend({
    // 經過template屬性指定了組件要展現的HTML結構
    template:"<div>我是使用Vue.extend建立的組件</div>" // 
})

// 使用Vue.component("組件名稱", 建立出來的組件模版對象)
Vue.component("custom", mycomponent) 

// 直接把組件的名稱以HTML標籤的形式引入到頁面中就可使用了
<custom></custom> 
複製代碼

注意：不管是那種方式建立出來的組件，組件的template屬性指向的模版內容，必須有且只能有一個惟一的根元素。vuex

注意：在使用Vue.component定義全局組件的時候，組件名稱使用駝峯命名，則在引用組件的時候，須要把大寫的駝峯改成小寫的字母，同時兩個單詞之間使用 - 鏈接，例如：bash

Vue.component("customLabel", mycomponent) // 組件名稱駝峯命名
<custom-label></custom-label> // 駝峯改成小寫的字母，同時兩個單詞之間使用 - 鏈接
複製代碼

註冊全局組件引用的簡寫方式：app

Vue.component("custom", Vue.extend({
    // 經過template屬性指定了組件要展現的HTML結構
    template:"<div>我是使用Vue.extend建立的組件</div>" // 
})) 
複製代碼

第二種使用Vue.component建立全局的Vue組件

Vue.component("custom", {
    // 經過template屬性指定了組件要展現的HTML結構
    template:"<div>我是使用Vue.component建立的組件</div>" // 
})

// 經過Vue.component的另外一種書寫方式建立全局組件
Vue.component("custom", {template:"#tmp"}) //  template屬性指向一個id
// 在被控制的Vue實例el綁定的元素外，使用template元素定義組件的HTML模版結構
<template id="tmp">
    <div>
        <h1>我是Vue.component建立全局組件的第二種方式</h1>
    </div>
</template>
複製代碼

第三種經過Vue實例的components屬性建立Vue局部組件（實例內部私有組件）

<div id="app">
    <custom>/custom>
    <customTwo></customTwo>
    <customThree></customThree>
</div>
<template id="tmp">
    <div>
        <h1>我是components建立的局部組件利用template元素</h1>
    </div>
</template>
<script>
    let customThree = {
        template: "<div><h1>我是Vue實例外建立的組件模版對象</h1></div>"
    }
    new Vue({
    el: "#app",
    components: {
        // 第一種方式
        "custom": {template:"<div><h1>我是components建立的局部組件</h1></div>"},
        // 第二種方式
        "customTwo"{template:"#tmp"}，
        // 第三種方式
        "customThree": customThree // 自定義組件名稱和組件模版對象名稱一致能夠簡寫爲一個
    }
})
</script>
複製代碼

注意：組件中也能夠定義數據和屬性ide

// 可是組件中的data和實例中的data不同，實例中的data能夠爲一個對象，但組件中的data必須是一個方法。
// 這個方法內部還必須return一個對象出來才行。
// 組件中data的數據和實例中data數據的使用方式徹底同樣
// 例如：
new Vue({
    el: "#app",
    data: {
        msg: "我是實例中data的數據"
    }
})
Vue.components("custom",{
    template:"<div> <h1>{{ msg }}</h1></div>",
    data () {
        return {
            msg: "我是組件中data的數據"
        }
    }
})
複製代碼

Vue提供了components元素來展現對應名稱的組件

// components是一個佔位符， :is 屬性能夠用來指定要展現的組件名稱
// 注意 :is 屬性的值爲要展現的組件名稱，可是也能夠寫成一個變量，方便某些時候動態切換要展現的組件。
<div id="app">
    <component :is="msg"></component>
    <button @click="change">切換組件</button>
</div>
<script>
    new Vue({
    el: "#app",
    data: {
        msg: "custom"
    },
    components: {
        "custom": {template:"<div><h1>我是components建立的局部組件custom</h1></div>"}，
        "customTwo": {template:"<div><h1>我是components建立的局部組件customTwo</h1></div>"}
    },
    methods: {
        change () {
            // 經過chage方法動態改變msg的值來切換要展現的組件
        }
    }
})
</script>
複製代碼

組件通訊 => 父子組件，兄弟組件之間通訊

組件通訊中，子組件是沒法訪問到父組件中的數據和方法的。
父組件能夠在引用子組件的時候，經過屬性綁定(v-bind)的形式，把數據傳遞給子組件使用。
父組件經過自定義屬性傳過來的數據，須要子組件在props屬性上接收才能使用。

父傳子值

<div id="app">
    <custom :parentmsg="msg"></custom>
</div>
<script>
    new Vue({
    el: "#app",
    data: {
        msg: "我是父組件中的數據"
    },
    components: {
        "custom": {
            props: ["parentmsg"]，// 子組件經過props屬性接收父組件傳來的數據
            template:"<div><h1>我要引用父組件中的數據----{{ parentmsg }}</h1></div>"
        }
    }
})
</script>
複製代碼

父傳子方法, 子傳父數據

父組件向子組件傳遞方法，使用的是事件綁定機制v-on,當咱們自定義事件屬性後，那麼子組件就能夠經過某些方式來調用父組件傳遞的這個方法。函數

<div id="app">
    // 經過自定義事件名稱func以事件綁定機制@func="show"將父組件的show方法傳遞給子組件
    <custom @func="show"></custom> 
</div>
<script>
    new Vue({
    el: "#app",
    data: {
        msg: "我是父組件中的數據"
    },
    components: {
        "custom": {
            props: ["parentmsg"]，// 子組件經過props屬性接收父組件傳來的數據
            data () {
                return {
                    childmsg: "我是子組件的數據"
                }
            },
            template:`
                <div>
                    <h1>我要調用父組件傳遞過來的方法</h1>
                    <button @click="emit">點我調用父組件傳遞的方法</button>
                </div>`，
            methods: {
                emit () {
                    // 觸發父組件傳過來的func方法，配合參數能夠將子組件的數據傳遞給父組件
                    // vm.$emit(evebtNane, [...args]) 觸發當前實例上的事件，附加參數會傳給監聽器回調。
                    this.$emit("func"，this.childmsg) 
                }
            }
        }，
    }，
    methods: {
        // 子組件觸發了我，而且給我傳遞了子組件的數據data
        show (data) {
            console.log("我是父組件中的show方法")
            console.log("接收到了子組件傳遞的數據---" + data)
        }
    }
})
</script>
複製代碼

注意組件中全部props屬性中的數據，都是經過父組件傳遞給子組件的。
props中的數據都是隻讀不可寫的，data上的數據都是可讀可寫的，
子組件中data中的數據，並非經過父組件傳遞過來的，而是子組件本身私有的。

兄弟組件之間數據傳遞

第一種藉助中央事件總線

<div id="app">
    
</div>
<script>
    // 從新實例一個Vue
    let Bus = new Vue()
    
    new Vue({
        el: "#app",
        components: {
            "custom": {
                template:`<div @click = sendMsg>
                    <button>點我給customTwo組件傳遞個人數據</button>
                </div>`,
                data () {
                    return {
                        msg: "我是custom組件的數據"
                    }
                },
                methods: {
                    sendMsg () {
                        Bus.$emit("myFunc", this.msg) // $emit這個方法會觸發一個事件
                    }
                }
            }，
            "customTwo": {
                template:`<div>
                    <h1>下面是我接收custom組件傳來的數據</h1>
                    <p>{{ customTwoMsg }}</p>
                </div>`,
                data () {
                    return {
                        customTwoMsg: ""
                    }
                }，
                created () {
                    this.brotherFunc()
                },
                methods: {
                    brotherFunc () {
                        Bus.$on("myFunc", (data) => { // 這裏要用箭頭函數，不然this指向有問題。
                            this.customTwoMsg = data
                        })
                    }
                }
            }
        }
    })
</script>
複製代碼

這樣藉助總線機制，實現兄弟組件之間的數據共享。工具

第二種藉助第三方vuex庫（這是我推薦使用的）

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。post

具體用法請查看vuex官方文檔超級詳細。學習

Vue入門指南(快速上手vue)ui