Vue ---- 組價 組件化 子傳父 父傳子

目錄

• 補充js的for循環:
• 組件
  • 1.組件的分類:
  • 2.組件的特色
  • 3.建立局部組件
  • 4.全局組件
• 二.組件化
  • 一.組件傳參父傳子
  • 二.組件傳參:子傳父

補充js的for循環:

// for in遍歷的是取值關鍵 | for of遍歷的是值

組件

概念:html, css, js的集合體命名 ,用該名字複用html,css,js組合成的集合體 體現了複用性

1.組件的分類:

// 根組件:new Vue() 生產的組件

// 局部組件: 組件名 = {} , {}內部採用的是vue語法

// 全局組件: Vue.component('組件名', {}) , {}內部採用的是vue語法

2.組件的特色

1.組件都有管理組件html頁面的結果的 template實例成員, template中有且只有一個根標籤

​ 掛載點本質是被組價template模塊進行替換的佔位符

// 總結: 根組件,能夠不明確template, template默認採用掛載點頁面結構:若是設置的template, 掛載點內部的內容無效,由於會被替換
// 解釋: html, body 標籤不能被替換,因此不能爲掛載點.
// template 渲染真實dom 替換虛擬dom

2.根組件都是做爲最頂層父組件, 局部與全局組價做爲子組價, 也能夠成爲其餘局部與全局的父組件

3.子組件的數據須要隔離(數據組件化,每個組件擁有本身的數據的獨立名稱空間)

4.局部組件必須註冊後才能使用,全局不須要註冊,提倡使用局部組件

5.組件中出現的全部變量(模板中,邏輯中) 由該組價本身提供管理

6.局部 全局 根組件 都是一個vue實例, 一個實對應一套html, css, js結構, 因此實例就是組件

3.建立局部組件

// 聲明局部組件:局部組件要在其父在組件中註冊才能使用
// 1.聲明組件 2.註冊組件 3.渲染組件

聲明:

let localTag = {
    template:'<a>pass</a>',
    methods:{
        pass
    }
}

// 註冊在components:{}裏註冊 key 和 value 若是同樣能夠簡寫 key

Vue({
    el:'xx',
    components:{
        localTag
    }
})

可是在html中的tag不支持大寫 因此用 - 來代替

<local-tag></local-tag>

4.全局組件

// 聲明局部組件:局部組件要在其父在組件中註冊才能使用
// 1.聲明組件 2.渲染組件

Vue.component('組件名', { 
    template:'<a>pass</a>',
    methods:{
        pass
    }
} )

<組件名></組件名>

二.組件化

每一個組件的數據應該是隔離的 可是data裏的數據你們訪問的都是同一個 因此要讓他產生本身的局部做用域

let localTag = {
    data:funttion(){
    return {
    num:0
}
    data(){
        return {
            num:0
        }  // 數據須要組件化，做爲方法的返回值（方法執行後會產生一個局部做用域）
    }
}
    template:'<a>{{num}}</a>',
    methods:{
        pass
    }
}

// 局部或全局取件,一個組件可能會被重複使用屢次, 每一個組件都應該有本身獨立的名稱空間

// 數據須要組件化,做爲方法的返回值(return{} 裏面放入數據就行)

一.組件傳參父傳子

// 1）子組件能夠經過props自定義組件屬性（採用反射機制，須要填寫字符串，可是使用時能夠直接做爲變量）
// 2）子組件會在父組件中渲染，渲染時，將父組件的變量綁定給子組件的自定義屬性，將能夠將變量值傳遞給子組件

關鍵字:props

在子標籤中規定自定義標籤 而後在子組件中填寫props:['xx'] 來獲取對應的值

<text-tag :abc="xxx"></Text-tag>

let textTag ={
    props: ['xxx']
};

同時, 在裏面調用該值也須要 使用屬性綁定來獲取 由於傳來的是變量!

二.組件傳參:子傳父

// 自定義組件標籤的事件
// 自定義事件是屬於子組件的，子組件在父組件中渲染並綁定事件方法，因此事件方法由父組件來實現
// 子組件如何觸發自定義事件：this.$emit('自定義事件名', 觸發事件回調的參數們)
// 子組件觸發自定義事件，攜帶出子組件的內容，在父組件中實現自定義事件的方法，拿到子組件傳遞給父組件的消息

子組件如何觸發自定義事件:

<!--this.$emit('自定義事件名', 觸發事件回調的參數們)-->

<tag @action="actionFn"></tag>

父組件的methods方法

methods: {
    actionFn(a, b, c) {
    // console.log('觸發了', a, b, c);
    this.h1 = a;
    this.h3 = b;
    },
 }

子組件的methods方法

methods: {
            changeTitle() {
                if (this.t1 && this.t2) {
                    this.$emit('action', this.t1, this.t2);
                }
            }
        }