非單檔案組件：一個檔案中包含有 n 個組件

一、組件

組件的定義——實作應用中區域功能代碼和資源的集合

組件：

理解：用來實作區域（特定）功能效果的代碼集（html/css/js...）
為什么：一個界面的功能很復雜
作用：復用編碼，簡化專案編程，提高運行效率

組件化：當應用中的功能都是多組件的方式來撰寫的，那這個應用就是一個組件化的應用

模塊化：當應用中的 js 都以模塊來縮寫的，那這個應用就是一個模塊化的應用（相當于把一個.js檔案分成多個.js檔案）

二、Vue 中使用組件的三大步驟

三大步驟：

1. 定義組件（創建組件）

2. 注冊組件

3. 使用組件（寫組件標簽）

1. 定義組件

使用 Vue.extend(options) 創建，其中 options 和 new Vue(options) 時傳入的那個 options 幾乎一樣，但也有點區別：

el 不要寫，因為最終所有的組件都要經過一個 vm 的管理，由 vm 中的 el 決定服務哪個容器
data 必須寫成函式，為了避免組件被復用時，資料存在參考關系

備注：使用 template 可以配置組件結構

2. 注冊組件

區域注冊：靠 new Vue 的時候傳入 components 選項
全域注冊：靠 Vue.component('組件名',組件)

3. 撰寫組件標簽

<組件名></組件名>

完整步驟代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="root">
        <school></school>
        <hr>
        <student></student>
    </div>
    <script>
        Vue.config.productionTip = false
        //創建名為 school 的組件
        const school = Vue.extend({
            template:
            `
            <div>
                <h2>學校名稱:{{schoolName}}</h2>
                <h2>學校地址:{{address}}</h2>
            </div>
            `,
            data(){
                return {
                    schoolName:'尚硅谷',
                    address:'北京'
                }
            }
        })
        //創建名為 student 的組件
        const student = Vue.extend({
            template: 
            `
            <div>
                <h2>學生姓名:{{studentName}}</h2>
                <h2>學生年齡:{{age}}</h2>
            </div>
            `,
            data(){
                return {
                    studentName:'張三',
                    age: 18
                }
            }
        })
        Vue.component('student',student)   //全域指令
        new Vue({
            el:'#root',
            components:{
                school,   //區域指令
            }
        })
    </script>
</body>
</html>

三、組件的嵌套

定義一個 app 組件，用來管理所有的組件，最后 app 被 Vue 實體所管理， app 只管它分支下面的組件，在分支中的組件自有分支自己管理，不用寫在 app 中

組件嵌套代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="root">
    </div>
    <script>
        Vue.config.productionTip = false
        const student = {
            template:
            `
            <div>
                <h2>學生名稱:{{studentName}}</h2>
                <h2>學生年齡:{{age}}</h2>
            </div>
            `,
            data(){
                return {
                    studentName:'張三',
                    age: 18
                }
            }
        }
        const school = {
            template: 
            `
            <div>
                <h2>學校名稱:{{schoolName}}</h2>
                <h2>學校地址:{{address}}</h2>
                <student></student>
            </div>
            `,
            data(){
                return {
                    schoolName:'尚硅谷',
                    address:'北京'
                }
            },
            components:{
                student
            }
        }
        const hello = {
            template:`<h2>{{msg}}</h2>`,
            data(){
                return {
                    msg: 'hello'
                }
            }
        }
        const app = {
            template: 
            `
            <div>
            <school></school>
            <hello></hello>
            </div>
            `,
            components:{
                school,
                hello
            }
        }
        new Vue({
            el:'#root',
            template:`<app></app>`,
            components:{
                app
            }

        })
    </script>
</body>
</html>

其中我們可以看到在 school 組件中寫了 components:{ student }，說明 student 組件是嵌套在 school 組件中的，歸 school 組件管理，而 app 組件中 components 下有兩個組件名，說明它們是平級的，且歸 app 管理

四、組件的幾個注意點

1. 關于組件名：

一個單詞組成：

第一種寫法（首字母小寫）：school

第二種寫法（首字母大寫）：School

多個單詞組成：

第一種寫法（kebab-case命名）：my-school

第二種寫法（CamelCase命名）：MySchool（需要Vue腳手架支持）

備注：

（1）組件名盡可能回避 HTML 中已有的元素名稱，例如：h2、H2 都不行

（2）可以使用 name 配置項指定組件在開發者工具中呈現的名字

2. 關于組件標簽：

第一種寫法：<組件名></組件名>

第二種寫法：<組件名/>

備注：不使用腳手架時，<組件名/> 會導致后續組件不能渲染

3. 一個簡寫方式：

const school = Vue.extend(options) 可簡寫為： const school = options

五、component 建構式?

1. school 組件本質是一個名為 VueComponent 的建構式，且不是程式員定義的，是 Vue.extend 生成的

2. 我們只需要寫 <school/> 或 <school></school>，Vue 決議時會幫我們創建 school 組件的實體物件，即 Vue 幫我們執行的： new VueComponent(options)

3. 特別注意：每次呼叫 Vue.extend 回傳的都是一個全新的 VueComponent

4. 關于 this 指向：

（1）組件配置中：

data 函式、methods 中的函式、watch 中的函式、computed 中的函式它們的 this 均是【VueComponent 實體物件】

（2）new Vue() 配置中：

data 函式、methods 中的函式、watch 中的函式、computed 中的函式它們的 this 均是【Vue 實體物件】

5. VueComponent 的實體物件稱之為組件實體物件

六、一個重要的內置關系

VueComponent.prototype.__proto__ === Vue.prototype

為什么要有這個關系: 讓組件實體物件可以訪問到 Vue 原型上的屬性、方法

可能這么說不理解，配個圖！

不過這里涉及了有關原型和原型鏈的知識，如果不知道這個的小伙伴建議先去了解一下再來理解這個喲~

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/374793.html

標籤：其他

上一篇：爬蟲模擬對“有道在線翻譯”發送請求（請求中的資料含需分析js來解出變化資料）