vue學(xué)習(xí)筆記（三）

fsmStudy 發(fā)布于2019-08-21 17:14 / 2148人閱讀

摘要：直接創(chuàng)建組件使用標(biāo)簽名組件模板，根據(jù)組件構(gòu)造器來(lái)創(chuàng)建組件。相應(yīng)的，實(shí)例也被稱(chēng)為父組件。而且不允許子組件直接修改父組件中的數(shù)據(jù)，強(qiáng)制修改會(huì)報(bào)錯(cuò)。

一、組件 （一）什么是組件

組件（Component）是 Vue.js最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML元素，封裝可重用的代碼組件是自定義元素（對(duì)象）。

（二）創(chuàng)建組件的兩種方式

官方推薦組件標(biāo)簽名是使用-連接的組合詞，例如：。

1、使用構(gòu)造器創(chuàng)建組件

使用這種方式創(chuàng)建組件首先需要使用Vue.extend()創(chuàng)建一個(gè)組件構(gòu)造器，然后使用Vue.component(標(biāo)簽名,組件構(gòu)造器)，根據(jù)組件構(gòu)造器來(lái)創(chuàng)建組件。

//1.創(chuàng)建構(gòu)造器
var MyComponent=Vue.extend({
    template:"Hello World"
});
//2.創(chuàng)建組件
Vue.component("my-hello",MyComponent);

//3.使用組件

這種創(chuàng)建組件的方式比較麻煩，使用的較少。

2、直接創(chuàng)建組件

使用Vue.component(標(biāo)簽名,組件模板)，根據(jù)組件構(gòu)造器來(lái)創(chuàng)建組件。

//1.創(chuàng)建組件
 Vue.component("my-world", {
    template: "hello vue.js"
 });
 
//2.使用組件

（三）組件的分類(lèi)

組件分為全局組件和局部組件。

1、全局組件

使用Vue.component()創(chuàng)建的組件都是全局組件。這樣的組件在任何組件內(nèi)都能使用。上面我們創(chuàng)建就是全局組件。

2、局部組件

局部組件一般都是定義在實(shí)例的選項(xiàng)中，稱(chēng)為實(shí)例的子組件。相應(yīng)的，實(shí)例也被稱(chēng)為父組件。

//1.定義組件
 new Vue({
    el: "#app",
    components: {
        dawei: {
            template: "my name is dawei"
        }
    }
});
//2.使用組件

（四）引用模板

很多時(shí)候我們的template模板中需要存放很多標(biāo)簽內(nèi)容，這樣的話(huà)寫(xiě)起來(lái)會(huì)很麻煩。這時(shí)候我們可以使用template標(biāo)簽。

用法如下：


    
    new Vue({
        el: "#app",
        components: {
            "my-dawei": {
                template: "#wbs",  //選擇template標(biāo)簽
                data() {
                    return {
                        msg: "vue.js",
                        arr: ["a", "b", "c", "d"]
                    }
                }
            }
        }
    });

這里涉及到的幾個(gè)知識(shí)點(diǎn)得著重提一下：

在template模板中，所有的元素必須放置在一個(gè)根元素中，要不然會(huì)報(bào)錯(cuò)。例子中我們將元素放置在了

標(biāo)簽中。

組件中的data選項(xiàng)必須是一個(gè)函數(shù)類(lèi)型，使用return返回所有的數(shù)據(jù)。

（五）動(dòng)態(tài)組件

很多時(shí)候項(xiàng)目中需要在某一個(gè)地方動(dòng)態(tài)的使用不同的組件，這時(shí)候就需要使用動(dòng)態(tài)組件。
動(dòng)態(tài)組件的使用需要綁定is屬性：

簡(jiǎn)單示例：

//點(diǎn)擊按鈕顯示不同的組件
 
    
    

      //傳入flag


new Vue({
    el: "#app",
    data: {
        flag: "my-a"   //給flag賦值
    },
    components: {
        "my-a": {
            template: "我是a組件",
        },
        "my-b": {
            template: "我是b組件"
        }
    }
});

（六）keep-alive組件

使用keep-alive組件緩存非活動(dòng)組件，可以保留狀態(tài)，避免重新渲染，默認(rèn)每次都會(huì)銷(xiāo)毀非活動(dòng)組件并重新創(chuàng)建。

使用范例：


     


 
    
    
    
        
    
 
 
 new Vue({
    el: "#app",
    data: {
        flag: "my-x"
    },
    components: {
        "my-x": {
            template: "{{x}}",
            data() {
                return {
                    x: Math.random()
                }
            }
        },
        "my-y": {
            template: "{{y}}",
            data() {
                return {
                    y: Math.random()
                }
            }
        }
    }
 });

這樣的話(huà)，第一次產(chǎn)生的隨機(jī)數(shù)就會(huì)被緩存，再次切換的時(shí)候也不會(huì)發(fā)生改變。

二、組件間數(shù)據(jù)傳遞 （一）父子組件

在一個(gè)組件內(nèi)部定義另一個(gè)組件，那么這對(duì)組件稱(chēng)為父子組件。子組件只能在父組件內(nèi)部使用。默認(rèn)情況下，每個(gè)組件實(shí)例的作用域是獨(dú)立的，子組件無(wú)法訪問(wèn)父組件中的數(shù)據(jù)，同樣，父組件也無(wú)法訪問(wèn)子組件中的數(shù)據(jù)。

（二）組件間數(shù)據(jù)傳遞（通信） 1、子組件訪問(wèn)父組件的數(shù)據(jù)

步驟：

a、調(diào)用子組件時(shí)，綁定想要獲取的父組件中的數(shù)據(jù)

b、在子組件內(nèi)部，使用props選項(xiàng)聲明獲取的數(shù)據(jù)，即接收來(lái)自父組件的數(shù)據(jù)

改進(jìn)上面的例子：

2、父組件訪問(wèn)子組件的數(shù)據(jù)

步驟：

a 在子組件中使用vm.$emit(事件名,數(shù)據(jù))觸發(fā)一個(gè)自定義事件，將數(shù)據(jù)發(fā)送給父組件，事件名自定義

b 父組件在使用子組件的地方監(jiān)聽(tīng)子組件觸發(fā)的事件，并在父組件中定義方法，用來(lái)獲取數(shù)據(jù)

//子組件‘my-b’內(nèi)部
methods:{
    send(){//使用$emit()觸發(fā)一個(gè)事件，發(fā)送數(shù)據(jù)，this指當(dāng)前子組件實(shí)例
        this.$emit("e-world", this.senddata);         
    }
}

//在調(diào)用子組件的地方監(jiān)聽(tīng)子組件觸發(fā)的事件，調(diào)用自己的方法獲取數(shù)據(jù)
   


 methods: {
    getData(data) {  //參數(shù)是子組件傳遞過(guò)來(lái)的數(shù)據(jù)
        this.revicedata = data;
    }
 }

3、單向數(shù)據(jù)流

props是單向數(shù)據(jù)綁定的，當(dāng)父組件數(shù)據(jù)發(fā)生變化時(shí)，將傳遞給子組件，但是不會(huì)反過(guò)來(lái)。而且不允許子組件直接修改父組件中的數(shù)據(jù)，強(qiáng)制修改會(huì)報(bào)錯(cuò)。

解決方案：

如果子組件想把它作為局部數(shù)據(jù)來(lái)使用，可以將數(shù)據(jù)存入另一個(gè)變量中再操作，不影響父組件中的數(shù)據(jù)

如果子組件想修改數(shù)據(jù)并且同步更新到父組件，兩個(gè)方法：

使用.sync顯式地觸發(fā)一個(gè)更新事件（1.0版本中支持，2.0版本中不支持，2.3版本又開(kāi)始支持）

//使用.sync
  
 
//子組件修改父組件傳入的值name，觸發(fā)update更新事件
this.$emit("update:name", "vuejs");

可以將父組件中的數(shù)據(jù)包裝成對(duì)象，然后在子組件中修改對(duì)象的屬性(因?yàn)閷?duì)象是引用類(lèi)型，指向同一個(gè)內(nèi)存空間)，推薦使用這種方式。

 data() {
    return { //將要傳遞的數(shù)據(jù)放入message對(duì)象中
        message: {
            hello: "子組件b你好，我是父組件a"
        }
    }
}

   //傳遞這個(gè)對(duì)象給子組件

 methods: {   //在子組件內(nèi)部修改這個(gè)值，這樣就會(huì)同步傳遞給父組件。
    edit() {
        this.message.hello = "hahahahh";
    }
 }

4. 非父子組件間的通信

非父子組件間的通信，可以通過(guò)一個(gè)空的Vue實(shí)例作為中央事件總線（事件中心），用它來(lái)觸發(fā)事件和監(jiān)聽(tīng)事件，從而實(shí)現(xiàn)非父子組件間的通信。

var Event = new Vue();    //空vue實(shí)例

 methods: {  
    send() {  //觸發(fā)emit事件
        Event.$emit("hello", this.asmsg);
    }
 }
 
 mounted() {    //在子組件的鉤子函數(shù)中監(jiān)聽(tīng)該事件
    Event.$on("hello", data => {   //獲取值
        this.bsmsg = data;  
    })
 }

三、slot內(nèi)容分發(fā)

用來(lái)獲取組件中的原內(nèi)容

var vm = new Vue({
    el: "#app",
    components: {
        "my-hello": {
            template: "#hello"
        }
    }
});


    hello vue.js

如果組件標(biāo)簽中沒(méi)有內(nèi)容就會(huì)顯示slot中的內(nèi)容，這也就是所謂的單個(gè)插槽。

還可以對(duì)顯示的內(nèi)容進(jìn)行分組，這就是具名插槽，可以操作標(biāo)簽組中的內(nèi)容：

這樣，就可以對(duì)組件中的內(nèi)容實(shí)時(shí)操作。

GPU云服務(wù)器云服務(wù)器 vue3 學(xué)習(xí)筆記 (五)——vue3 學(xué)習(xí)筆記學(xué)習(xí)筆記一基礎(chǔ)學(xué)習(xí)筆記

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89285.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

fsmStudy

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

C++從0到1之命名空間

閱讀 3336·2021-11-25 09:43
立即更新您的Windows PC!微軟周二補(bǔ)丁修復(fù)易受主動(dòng)攻擊的0 Day漏洞!

閱讀 3022·2021-10-15 09:43
關(guān)于這個(gè)大一結(jié)束——————

閱讀 1977·2021-09-08 09:36
CSS相關(guān)面試題——三欄等高布局

閱讀 2930·2019-08-30 15:56
設(shè)置圖片水平垂直居中

閱讀 757·2019-08-30 15:54
浮動(dòng)及浮動(dòng)相關(guān)問(wèn)題(初次)

閱讀 2697·2019-08-30 15:54
反思：我使用ID選擇器時(shí)應(yīng)該考慮這些問(wèn)題

閱讀 2988·2019-08-30 11:26
004-盒模型及文本溢出

閱讀 1258·2019-08-29 17:27

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

vue學(xué)習(xí)筆記（三）

Hello World

hello vue.js

my name is dawei

hello {{msg}}

相關(guān)文章

Vue 筆記三：Vue2.0與1.0的區(qū)別