Vue組件高級(jí)技術(shù)（vue高級(jí)組件開發(fā)）

上一章節(jié)我們講解了組件的基礎(chǔ)知識(shí)，本章我們將深入講解組件的傳值以及使用綜合案例進(jìn)行實(shí)踐操作。

5

6

7

8

9

6.1 兄弟組件傳值

在前面的內(nèi)容中我們已經(jīng)學(xué)習(xí)了父與子之間的傳值，接下來我們來看如果組件之間的關(guān)系是平級(jí)的也就是兄弟組件之間該如何傳值呢？兄弟傳值有兩種方式，一種是使用EventBus，另一種是借助父子傳值實(shí)現(xiàn)兄弟傳值，下面詳細(xì)解釋。

6.1.1 第一種方式Vue實(shí)例

我們先寫兩個(gè)兄弟組件，大家看案例代碼：

例6-1 Demo0601.html

1

2

3

4

5

6

7

8

9

10

65

66

程序的運(yùn)行結(jié)果如下：

圖 6- 1 案例效果

我們現(xiàn)在要做的是在組件1中輸入喜歡人的名字，點(diǎn)擊確定按鈕，把名字傳給兄弟組件2中顯示。

第一步：建立一個(gè)空的Vue實(shí)例，用來兄弟組件之間的數(shù)據(jù)傳遞：

let bus = new Vue();

第二步：在組件1中觸發(fā)組件的事件：使用 $emit 觸發(fā)，點(diǎn)擊按鈕的時(shí)候把名字傳過去

// 確定名字組件

let x1 = Vue.extend({

template: "#x1",

data() {

return {

username: ""

}

},

methods: {

getName() {

bus.$emit("editName", this.username);//點(diǎn)擊確定按鈕把名字傳過去

}

}

});

第三步：在組件2中接受，接受組件的事件： 使用 $on 接受，必須寫在鉤子函數(shù)中

//確定名字后的表白組件

let x2 = Vue.extend({

template: "#x2",

data() {

return {

name: "小麗",

}

},

methods: {

myfn() {

bus.$on("editName", (name) => {

this.name = name;

});

}

},

created() {

this.myfn();

}

});

也可以這樣寫，直接在鉤子函數(shù)中去接受傳過來的數(shù)據(jù)。

let x2 = Vue.extend({

template: "#x2",

data() {

return {

name: "小麗",

}

},

methods: {

},

created() {

bus.$on("editName", (name) => {

this.name = name;

});

}

});

完整代碼如下：

1

2

3

4

5

6

7

8

9

10

89

90

通過例6-1中，我們通過一個(gè)空的Vue實(shí)例，來做中間容器，組件1輸入名字，點(diǎn)擊按鈕觸發(fā)Vue實(shí)例中的$on監(jiān)聽的方法 ，注意，$on和$emit后面的方法名字要一致，有同學(xué)會(huì)問，但是這個(gè)方法并不存在，這個(gè)方法的作用是用來保證on和emit監(jiān)聽和發(fā)送雙方的一致，所以該方法可以不存在但是必須保持一致。

6.1.2 第二種方式props和event

兄弟傳值也可以借助于同一個(gè)父組件，把兩個(gè)自組建的內(nèi)容都傳給父組件，通過父組件來實(shí)現(xiàn)數(shù)據(jù)交流。

接下來我們把上面的例子進(jìn)行改造，實(shí)現(xiàn)使用props和event方法兄弟傳值。

例6-2 Demo0602.html

1

2

3

4

5

6

7

8

9

10

85

86

程序的運(yùn)行結(jié)果如下：

圖 6- 2 使用父組件作為容器進(jìn)行兄弟傳值

通過例6-2中，我們先通過自定義事件，把組件1的值傳給父組件，然后父組件使用props把獲取的值傳給組件2,這樣也能夠?qū)崿F(xiàn)兄弟傳值。

6.1.3 第三種方式使用parent、children和refs

除了使用Vue空實(shí)例，以及父子傳值我們還可以使用Vue實(shí)例的三個(gè)屬性，分別是parent,children和refs,接下來我們來看這三種屬性如何使用：

This.$parent //獲取父組件

This.$children //獲取子組件

This.$refs.子組件ref的名字 //獲取子組件

1、ref為子組件指定一個(gè)索引名稱，通過索引來操作子組件；

2、this.$parent 可以直接訪問該組件的父實(shí)例或組件；

3、父組件也可以通過this.$children 訪問它所有的子組件； 需要注意 $children 并不保證順序，也不是響應(yīng)式的。

接下來我們來看案例中具體使用：

例6-3 Demo0603.html

1

2

3

4

5

6

7

8

9

10

93

94

程序的運(yùn)行結(jié)果與上面兩個(gè)案例效果相同。

下面我們來看代碼解析：

組件2使用ref加入索引：

父組件中提供宮組件1調(diào)用的方法：

methods: {

//該方法調(diào)用組件2的方法給name賦值

//但是該方法會(huì)在組件1中調(diào)用，這樣就把組件1中username->sanme->組件2

getx1(sname) {

this.$refs.szj.sonName(sname);

},

}

組件1中點(diǎn)擊確定按鈕，則把組件1中的名字傳值給父組件中的方法：

methods: {

getName() {

this.$parent.getx1(this.username);

}

}

例6-3中，我們也可以使用$children替換$refs，但是父組件有多個(gè)子組件，使用的時(shí)候要使用下標(biāo)說明調(diào)用的是哪個(gè)子組件。

methods: {

//該方法調(diào)用組件2的方法給name賦值

//但是該方法會(huì)在組件1中調(diào)用，這樣就把組件1中username->sanme->組件2

getx1(sname) {

console.log(this);

this.$children[1].sonName(sname);

},

}

6.2 跨級(jí)傳值

在Vue中，有時(shí)需要實(shí)現(xiàn)通信的兩個(gè)組件不是直接的父子組件，而是祖父和孫子，或者是跨越了更多層級(jí)的父子組件，這種時(shí)候就不可能由子組件一級(jí)一級(jí)的向上傳遞參數(shù)，特別是在組件層級(jí)比較深，嵌套比較多的情況下，需要傳遞的事件和屬性較多，會(huì)導(dǎo)致代碼很混亂。這時(shí)就需要用到 vue 提供的更高階的方法：provide/inject。

這對(duì)選項(xiàng)需要一起使用，以允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴，不論組件層次有多深，并在起上下游關(guān)系成立的時(shí)間里始終生效。

provide/inject：簡單來說就是在父組件中通過provider來提供變量，然后在子組件中通過inject來注入變量，不管組件層級(jí)有多深，在父組件生效的生命周期內(nèi)，這個(gè)變量就一直有效。

先看使用步驟：

子組件：

inject: ['name'], // 注入了從父組件中提供的name變量

mounted () {

console.log(this.name); // Jack

}

接下來演示完整案例：

例6-4 Demo0604.html

1

2

3

4

5

6

7

8

9

10

73

74

程序的運(yùn)行結(jié)果如下：

圖 6- 3 把父組件的值傳給兒子和孫子

例6-4中，該案例中的值不是相應(yīng)式的，也就是說如果父組件中的文本框內(nèi)的數(shù)據(jù)發(fā)生變化，兒子和孫子接受的值不是不會(huì)跟著變化的，如果想要響應(yīng)式變化我們可以使用如下代碼：

父組件容器：

// 父組件

孫子容器：

例6-5 Demo0605.html

1

2 p

3

4

5

6

7

8

9

10

11

74

75

程序的運(yùn)行結(jié)果如下：

圖 6- 4 子孫組件的值會(huì)跟著父組件的變化而變化

以上是使用provide把父組件實(shí)例共享給子孫，子孫通過inject注入，就可以使用父組件的值。

6.3 綜合案例

有關(guān)組件的知識(shí)，通過第五章和第六章我們已經(jīng)學(xué)習(xí)掌握，本節(jié)同通過實(shí)際操作來掌握有關(guān)父子傳值的知識(shí)。

6.3.1 效果和需求

效果

圖 6- 5 綜合案例效果圖

該案例實(shí)現(xiàn)了評(píng)論的增刪改查，以及模糊查詢和分頁查詢；

需求

? 實(shí)現(xiàn)所有評(píng)論的分頁查詢

? 實(shí)現(xiàn)模糊查詢

? 實(shí)現(xiàn)添加功能

? 實(shí)現(xiàn)修改功能

? 實(shí)現(xiàn)刪除功能

該案例綜合使用動(dòng)態(tài)組件、axios、以及組件傳值，希望大家通過練習(xí)該案例能夠掌握vue組件的基礎(chǔ)知識(shí)。

6.3.2 實(shí)際步驟

第一步：建立數(shù)據(jù)源

建立data.json，因?yàn)槲覀兊臄?shù)據(jù)最初是從json文件里面拿出來的,拿出來后存儲(chǔ)到本地中

1 {

2 "comments": [

3 {

4 "commentId": 1,

5 "content": "平凡的世界",

6 "comDate": "1999-09-09"

7 },

8 {

9 "commentId": 2,

10 "content": "白天與黑夜",

11 "comDate": "1999-09-09"

12 },

13 {

14 "commentId": 3,

15 "content": "這個(gè)很不錯(cuò)額",

16 "comDate": "1999-09-09"

17 },

18 {

19 "commentId": 4,

20 "content": "平凡的世界",

21 "comDate": "1999-09-09"

22 },

23 {

24 "commentId": 5,

25 "content": "平凡的世界",

26 "comDate": "1999-09-09"

27 }

28 ]

29 }

第二步：查詢建立頁面

在頁面上引入vue.js，bootstrap.csc、axios.js以及moment.js

其中moment.js 是用來時(shí)間格式化的。

1

2

3

4

5

6

7

8

9

10

95

96

97

程序運(yùn)行結(jié)果如下：

圖 6- 6 查詢所有評(píng)論

第四步：實(shí)現(xiàn)添加

添加的時(shí)候?qū)崿F(xiàn)評(píng)論id自增，通過計(jì)算屬性查詢出數(shù)組的最大值，在最大值的基礎(chǔ)上加1，在添加模板中，點(diǎn)擊添加按鈕，把最新添加的評(píng)論內(nèi)容添加到數(shù)組中和本地中。點(diǎn)擊添加按鈕的時(shí)候使用$parent調(diào)用父組件的方法。

寫添加模板：

1

2

15

添加的樣式：

1

8

添加的時(shí)候，我們的編號(hào)是通過查找最大的編號(hào)，然后在最大的編號(hào)的基礎(chǔ)上加1：

1 computed: {

2 num() {

3 let index = 1;

4 this.coms.forEach(item => {

5 let id = parseInt(item.commentId);

6 if (id > index) {

7 index = id;

8 }

9

10 });

11 return index;

12 }

13 }

14

添加模板中的方法：

1 let addCom = Vue.extend({

2 template: '#add',

3 data() {

4 return {

5 content: ""

6 }

7 },

8 methods: {

9 addItem() {

10 let obj = { content: this.content }

11 this.$parent.addCom(obj);

12 }

13 }

14

15 });

父組件中的添加方法：

1 //添加方法

2 addCom(item) {

3 item.commentId = this.num + 1;

4 let date = new Date();

5 let commentDate = moment(date).format('YYYY-MM-DD')

6 item.comDate = commentDate;

7 this.coms.push(item);

8 localStorage.setItem("comments", JSON.stringify(this.coms));

9

10 }

程序運(yùn)行如下：

圖 6- 7 實(shí)現(xiàn)添加評(píng)論

來看本地存儲(chǔ)中也添加了最新的數(shù)據(jù)：

圖 6- 8 本地存儲(chǔ)添加最新數(shù)據(jù)

第五步：實(shí)現(xiàn)修改業(yè)務(wù)；

點(diǎn)擊修改按鈕的時(shí)候，我們希望在添加的位置，顯示修改的模板，這個(gè)時(shí)候我們可以使用動(dòng)態(tài)組件component的is屬性，默認(rèn)顯示add組件。

1

2 .

3 .

4 .

5 data: {

6 coms: [],

7 addOrupdate: "add"

8

9 },

設(shè)置修改的模板，設(shè)置完畢模板后要在父組件中注冊：

1

2

點(diǎn)擊每一行的修改按鈕的時(shí)候要做以下事情：

? 表格上方改為修改模板

? 根據(jù)要修改的id找到這個(gè)數(shù)據(jù)

? 把該對(duì)象原來的數(shù)據(jù)傳到修改組件中

1 //點(diǎn)擊修改按鈕去修改

2 //1、在添加的位置顯示修改模板

3 //2、要修改的信息進(jìn)行回顯

4 toUpdate(id) {

5 this.addOrupdate = "update";

6 //根據(jù)id找到信息進(jìn)行回顯

7 let obj = {};

8 this.coms.some(c => {

9 if (c.commentId === id) {

10 obj = c;

11 return true;

12 }

13 });

14 this.upobj = obj;

15

16

17 },

現(xiàn)在把upobj傳給修改組件

1

2

3

4 //修改模板去接受

5 let updateCom = Vue.extend({

6 template: "#update",

7 props: ['upobj'],

8 });

由于使用props是單向向下的，只能父組件傳給子組件，但是子組件不能修改，所以我們要把props中的數(shù)據(jù)給data中的id和content,同時(shí)要監(jiān)視props數(shù)據(jù)的變化，一旦變化隨時(shí)傳值給data:

1 let updateCom = Vue.extend({

2 template: "#update",

3 props: ['upobj'],

4 data() {

5 return {

6 id: this.upobj.commentId,

7 content: this.upobj.content

8 }

9 },

10 watch: {

11 //監(jiān)聽父組件傳過來的值，只要傳過來的值發(fā)生變化，子組件的data中的數(shù)據(jù)也會(huì)跟著變化

12 upobj(val) {

13 this.id = val.commentId;

14 this.content = val.content;

15 }

16 }

17

18

19 });

20

程序運(yùn)行如下：

圖 6- 9 點(diǎn)擊修改按鈕數(shù)據(jù)回顯成功

點(diǎn)擊提交實(shí)現(xiàn)修改：

點(diǎn)擊提交，根據(jù)最新的數(shù)據(jù)生成一個(gè)對(duì)象，然后在子組件中調(diào)用父組件的修改方法，實(shí)現(xiàn)修改業(yè)務(wù)：

1 //父組件中的修改的方法

2 update(obj) {

3 console.log(obj);

4 obj.comDate = moment(new Date()).format("YYYY-MM-DD");

5 this.coms.some(c => {

6 if (c.commentId === obj.commentId) {

7 c.content = obj.content;

8 c.comDate = obj.comDate;

9 return true;

10 }

11 });

12 //本地存儲(chǔ)做出修改

13 localStorage.setItem("comments", JSON.stringify(this.coms));

14 //修改頁面恢復(fù)為添加

15 this.addOrupdate = "add";

16

17 }

18 //修改子組件的方法

19 methods: {

20 //修改的方法

21 //把修改的數(shù)據(jù)覆蓋掉之前的數(shù)據(jù)

22 //在子組件中調(diào)用父組件的修改方法

23 upfn() {

24 let obj = {

25 commentId: this.id,

26 content: this.content

27 }

28 this.$parent.update(obj);

29

30 }

31

32 },

33

第六步：實(shí)現(xiàn)刪除

點(diǎn)擊刪除按鈕的時(shí)候，實(shí)現(xiàn)從data中的coms中刪除，同時(shí)跟localStorage保持一致：

1 //執(zhí)行刪除功能

2 //根據(jù)id查找，找到后刪除

3 del(id) {

4 this.coms.some((c, index) => {

5 if (c.commentId === id) {

6 this.coms.splice(index, 1);

7 return true;

8 }

9 });

10 localStorage.setItem("comments", JSON.stringify(this.coms));

11 }

12

第七步：實(shí)現(xiàn)搜索

定義搜索的模板，然后在父組件中注冊：

1

2

3

點(diǎn)擊查找按鈕，進(jìn)行調(diào)用父組件中的查找方法：

1 //搜索

2 let searchCom = Vue.extend({

3 template: "#search",

4 data() {

5 return {

6 keywords: ""

7 }

8 },

9 methods: {

10 searfn() {

11 this.$parent.search(this.keywords);

12

13 }

14 }

15 });

16

17 //父組件的搜索功能,scoms是在父組件中定義的專門用來存儲(chǔ)搜索后結(jié)果的數(shù)組，同時(shí)table遍歷改成使用scoms

18 search(kw) {

19 this.scoms = this.coms.filter(item => {

20 return item.content.includes(kw);

21 });

22 }

23 //最開是的查詢所有變成如下代碼

24 allComs() {

25 let comments = JSON.parse(localStorage.getItem("comments") || "[]");

26 this.coms = comments;

27 if (comments.length === 0) {

28 axios.get("./data.json").then(resp => {

29 console.log(resp.data);

30 this.coms = resp.data.comments;

31 localStorage.setItem("comments", JSON.stringify(this.coms));

32 }, resp => {

33 console.log("error");

34 });

35 }

36 this.scoms = this.coms;//把原來的數(shù)組給搜索的結(jié)果

37

38 },

程序運(yùn)行結(jié)果如下：

圖 6- 10 模糊查詢的功能

第八步：實(shí)現(xiàn)分頁

定義分頁模板：

11

12

接下來實(shí)現(xiàn)默認(rèn)顯示第一頁的內(nèi)容：

在這我們使用的是數(shù)組的slice方法可以截取某一個(gè)段，所以我們需要計(jì)算開始和結(jié)束位置：

12

1

2 //使用計(jì)算屬性計(jì)算截取的開始位置

3 start() {

4 return this.pageIndex * this.pageSize - this.pageSize;

5

6 },

7

8 //截取的結(jié)束位置

9 end() {

10 return this.pageIndex * this.pageSize;

11

12 }

模板變化：

1

2

實(shí)現(xiàn)點(diǎn)擊頁碼顯示相應(yīng)的內(nèi)容：

11 methods: {

1 //分頁組件的點(diǎn)擊頁碼事件

2 goto(n) {

3 this.$parent.changePageIndex(n);

4

5 }

6 }

7

8 //父組件的方法

9 //執(zhí)行顯示相應(yīng)的頁碼的內(nèi)容，本質(zhì)就是改變頁碼

10 changePageIndex(val) {

11 this.pageIndex = val;

12

13 }

14

實(shí)現(xiàn)上一頁下一頁的功能：

1 methods: {

1 //分頁組件的點(diǎn)擊頁碼事件

2 goto(n) {

3 this.$parent.changePageIndex(n);

4

5 },

6 //子組件的上一頁

7 prev() {

8 this.$parent.goUp();

9 },

10 //自組建的下一頁

11 next() {

12 this.$parent.goDown();

13 }

14 }

15

16 //父組件的上一頁下一頁

17 //上一頁

18 goUp() {

19 if (this.pageIndex === 1) {

20 alert("已經(jīng)是第一頁了");

21 } else {

22 this.pageIndex = this.pageIndex - 1;

23 }

24

25 },

26 //下一頁

27 goDown() {

28 if (this.pageIndex === this.pagenum) {

29 alert("已經(jīng)是最后一頁了");

30 } else {

31 this.pageIndex = this.pageIndex + 1;

32 }

33 }

6.3.3 完整案例

Data.json

1

2 {

3 "comments": [

4 {

5 "commentId": 1,

6 "content": "平凡的世界",

7 "comDate": "1999-09-09"

8 },

9 {

10 "commentId": 2,

11 "content": "白天與黑夜",

12 "comDate": "1999-09-09"

13 },

14 {

15 "commentId": 3,

16 "content": "這個(gè)很不錯(cuò)額",

17 "comDate": "1999-09-09"

18 },

19 {

20 "commentId": 4,

21 "content": "平凡的世界",

22 "comDate": "1999-09-09"

23 },

24 {

25 "commentId": 5,

26 "content": "人間失格",

27 "comDate": "1999-09-09"

28 },

29 {

30 "commentId": 6,

31 "content": "yyh",

32 "comDate": "1999-09-09"

33 },

34 {

35 "commentId": 7,

36 "content": "yyh當(dāng)當(dāng)",

37 "comDate": "1999-09-09"

38 }

39 ]

40 }

綜合案例.html

1

2

3

4

5

6

7

8

9

10

89

90

91

108

109

117

118

119

128

129

130

389

390

391

6.4 本章小結(jié)

? 兄弟組件傳值有三種方式：空的Vue實(shí)例、props和event結(jié)合以及parent/children/refs;

? 跨級(jí)組件傳值使用provider在父組件中申明，使用inject在孫子組件中注入；

? 綜合案例掌握不同組件之間的數(shù)據(jù)通訊，以及axios的初步使用以及動(dòng)態(tài)組件的使用。

6.5 理論試題與實(shí)踐練習(xí)

1.思考題

1.1 請簡述如何使用空的Vue實(shí)例傳值；

1.2 請簡述如何使用props和event實(shí)現(xiàn)兄弟組件傳值；

1.3 請簡述parent/children/refs的使用；

1.4 請簡述跨級(jí)provicer/inject的使用步驟；

1.5 請簡述keep-alive的使用和以及鉤子函數(shù)；

1.6 請簡述動(dòng)態(tài)組件如何傳值；

2.編程題

實(shí)現(xiàn)圖書管理的增刪改查以及分頁和模糊查詢

Vue

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。