1. 認識Vue組件

組件系統是 Vue 的另一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通常可復用的組件構建大型應用。

仔細想想，幾乎任意類型的應用界面都可以抽象為一個組件樹：

1.1 組件是什麼

組件就是一段獨立的,能代表頁面某一個部分的代碼片段, 擁有自己獨立的數據,JavaScript腳本,以及樣式的標籤.

1.2 組件的好處:

提高開發效率
方便重複使用
便於協同開發
更容易被管理和維護

1.3 組件創建的基本步驟

Vue.js的組件的使用有3個步驟：創建組件構造器、註冊組件和使用組件

1.4 示例

通過一個示例來了解組件的使用

使用Vue的component方法註冊全局組件

<div id="app-one">
    <!-- 3.在實例中使用組件 -->
    <greeting></greeting>
</div>

<script>
    
    // 1. 組件構造器
    let MyComponent= Vue.extend({
        // 配置對象
        // 因為組件沒有掛在點,所以使用模板,只有一個根節點
        template: `
            <div>
                <p>大家好,我叫{{name}}</p>
                <button @click="changeName">點擊換名字</button>
            </div>
        `,
        data: function(){
            return {
                name:"渣渣輝"
            }
        },
        methods:{
            changeName(){
                this.name = "古天樂"
            }
        }
    })

    // 2. 通過Component方法,將構造器擴展的構造函數創建組件實例
    Vue.component("Greeting",MyComponent)
    
   
   // Vue 實例
    const vm = new Vue({
        el:"#app-one",
    })

</script>

顯示結果:

1.5 理解組件的創建和註冊

Vue.extend()是Vue構造器擴展，調用Vue.extend()創建的是一個組件構造器，而不是具體的組件實例。
Vue.extend()構造器有一個選項對象，選項對象的template屬性用於定義組件要渲染的HTML模板。
使用Vue.component()註冊組件時，需要提供2個參數，第1個參數時組件的名，第2個參數是組件構造器。
Vue.component()方法內部會調用組件構造器，創建一個組件實例。
組件應該掛載到某個Vue實例下，否則它不會生效。

1.6 Vue構造器擴展直接創建Vue實例

Vue.extend 方法相當於是對於原有的Vue 構造函數進行了擴展, 本質上核心還是Vue的構造函數,所以我們可以直接通過擴展的構造函數創建Vue實例

<div id="app"></div>
<script>
   
    // 1. 通過組件構造器擴展構造函數
    let MyComponent= Vue.extend({
        // 配置對象
        // 因為組件沒有掛在點,所以使用模板,只有一個根節點
        template: `
            <div>
                <p>大家好,我叫{{name}}</p>
                <button @click="changeName">點擊換名字</button>
            </div>
        `,
        data: function(){
            return {
                name:"渣渣輝"
            }
        },
        methods:{
            changeName(){
                this.name = "古天樂"
            }
        }
    })

    // 2. 通過擴展的構造函數創建Vue實例
    new MyComponent({
        el:'#app'
    })
</script>

示例說明:

Vue組件其實也是Vue實例,只不過沒有掛在點, 通過template處理需要渲染的DOM
但是組件實例必須有一個名字, 通過這個名字在Vue實例中使用, 通過自定定義標籤方式使用組件

在vue中,一個自定義標籤 vue就會把它看成一個組件,vue可以給這些標籤賦予一定的意義

1.7 直接通過選項對象創建組件

其實所有的Vue的組件同時也都是Vue的實例.
所以組件可接受的相同選項對象.
因此我們在創建組件的過程中也就沒有必要每次都通過構造器擴展Vue構造函數

直接把構造器的選項對象作為第二個參數傳遞給Vue.component就可以

示例如下:

// 創建組件
Vue.component("Greeting",{
    template: `
        <div>
            <p>大家好,我叫{{name}}</p>
            <button @click="changeName">點擊換名字</button>
        </div>
    `,
    data: function(){
        return {
            name:"渣渣輝"
        }
    },
    methods:{
        changeName(){
            this.name = "古天樂"
        }
    }
})

使用組件

<div id="app-one">
    <greeting></greeting>
</div>

推薦使用這種方式創建組件.

注意事項:

組件名稱不能起和HTML合法標籤相同的名字，如p,
如果組件名跟HTML合法標籤同名, 會默認解析為合法的標籤,
因此會將p識別為普通的標籤,而不是自定義標籤,因此就不會被當成組件處理, 同時還會報錯

1.8 組件的分類

全局組件 : 可以聲明一次在任何地方使用(一般寫插件的時候全局使用的多一點)
局部組件: 必須告訴這個組件屬於誰(一般用局部比較好)

那麼接下來就讓我們好好理解一些全局組件和局部組件的使用

2. 全局組件

通過剛才的實例,對於全局組件相信你們已經有了一定的了解

調用Vue.component()註冊組件時，組件的註冊是全局的，這意味着該組件可以在任意Vue示例下使用。

通過示例了解全局組件的使用

2.1 創建全局組件

通過Vue.component 方法註冊全局組件, 組件名稱建議使用大駝峰命名

//  在js中定義組件名時使用大駝峰式命名,
// 但是在標籤html中里使用時盡量用連字符-
Vue.component('MyCom', {   
    template: `
        <div>這是全局組件的內容</div>
     `
})

2.2 創建多個Vue實例

// 實例一
new Vue({
    el:"#app-one",
})

// 實例二
new Vue({
    el:"#app-two",
})

2.3 在多個Vue實例中使用全局組件

<div id="app-one">
    <!-- 是使用組件的時候要把大駝峰轉為連字符的方式使用 -->
    <my-com></my-com>
    
    <!-- 
        如果使用了如下的方式就會報錯,
    -->
    <!-- <MyCom></MyCom> -->
    
    
</div>
<div id="app-two">
    <!-- 如果自定義標籤裏面沒有嵌套內容可以寫成單標籤的形式 -->
    <my-com />
</div>

2.4 注意事項

相信你們看到了我們註冊組件的時候使用的組件名是一個駝峰寫法的方式,此時使用組件時的自定義標籤中不能使用駝峰寫法會報錯的, 因為HTML不能識別大小寫, 會將你寫的<MyCom>識別為<mycom>這樣就找不到組件了,因此會在控制台報錯

但是我們可以在定義組件的使用使用連字符的方式定義組件名

示例代碼如下:

<div id="app-two">
    <!-- 使用組件 -->
    <my-com />
</div>

<script>

    //  使用連字符定義組件名
    Vue.component('my-com', {   
        template: `
            <div>這是全局組件的內容</div>
        `
    })

    // Vue實例化
    new Vue({
        el:"#app",
    })
</script>

通過示例,我們了解了定義組件是使用連字符和駝峰命名都可以,但是在HTML標籤里使用組件的使用一定只能寫成連字符的方式.

關於組件名說明:

雖然在定義組件時我們可以使用連字符命名,但是不推薦,
推薦的使用方式是,定義組件使用駝峰方式, 使用組件使用連字符方法.

至於為什麼, 您接着往下看.

3. 局部組件

有的時候我們並不希望組件在所有的實例中都能使用, 那麼我們就可以將組件定義為局部組件

3.1 局部組件使用三步曲

創建局部配置,
註冊局部組件
使用局部組件

3.2 使用構造器創建並使用局部組件

我們可以使用構造器創建局部組件,

示例代碼如下:

<div id="app-one">
    <!-- 3. 在註冊了局部組件的實例中使用局部組件 -->
    <my-component></my-component>

</div>
<div id="app-two">
    <!-- 當前的這個實例並沒有註冊局部組件,所以會報錯 -->
    <my-component></my-component>
</div>


<script>
    // 1. 使用構造器創建組件配置
    let MyComponent = Vue.extend({
        template: `
            <div>
                <h2>我想被創建為局部組件</h2>
            </div>
        `,

    })


    // 註冊局部組件的實例
    const vm = new Vue({
        el:"#app-one",
        
        // 2. 註冊為只能在當前實例中使用的局部組件
        components: {
            "my-component": MyComponent
        }

    })

    // 沒有註冊局部組件的實例
    new Vue({
        el:"#app-two",
    })
</script>

示例說明:

通過extend方法創建Vue構造器
在Vue選項對象中,通過components選項將構造器創建為局部組件,
components選項值是一個對象,對象的屬性是組件的名稱,值是將要被創建為組件的構造器或選項對象
沒有註冊局部組件的實例對象是不能使用其它實例中的局部組件,

因此示例的實例中app-two中是不能使用組件my-component的,會報錯

3.3 直接通過選項對象來創建組件

前一小節有講過我們可以直接將選項對象註冊為全局組件, 同樣的我們也可以直接將選項對象註冊為局部組件,Vue內部會將選項對象進行處理

示例代碼如下:

<div id="app-one">
    <!-- 3. 在註冊了局部組件的實例中使用局部組件 -->
    <my-component></my-component>
</div>


<script>
    // 1. 創建局部組件的選項對象
    let MyComponent = {
        template: `
            <div>
                <h2>我想被創建為局部組件</h2>
            </div>
        `,

    }


    const vm = new Vue({
        el:"#app-one",
        // 2. 將選項對象註冊為局部組件
        components: {
            "my-component": MyComponent
        }

    })


</script>

通過對比我們就會發現直接將選項對象註冊為局部組件要來的簡單一點,所以推薦使用選項對象創建組件的方式,無論是全局組件還是局部組件

這種使用選項對象直接註冊為組件的方式被稱作為組件註冊語法糖

原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/233049.html