vue組件以及父子組件通信方式
vue組件及父子組件通信
一. 認(rèn)識(shí)組件化
1.1. 什么是組件化？
人面對(duì)復(fù)雜問(wèn)題的處理方式：
任何一個(gè)人處理信息的邏輯能力都是有限的
所以，當(dāng)面對(duì)一個(gè)非常復(fù)雜的問(wèn)題時(shí)，我們不太可能一次性搞定一大堆的內(nèi)容。
但是，我們?nèi)擞幸环N天生的能力，就是將問(wèn)題進(jìn)行拆解。
如果將一個(gè)復(fù)雜的問(wèn)題，拆分成很多個(gè)可以處理的小問(wèn)題，再將其放在整體當(dāng)中，你會(huì)發(fā)現(xiàn)大的問(wèn)題也會(huì)迎刃而解。
組件化也是類(lèi)似的思想：
- 如果我們將一個(gè)頁(yè)面中所有的處理邏輯全部放在一起，處理起來(lái)就會(huì)變得非常復(fù)雜，而且不利于后續(xù)的管理以及擴(kuò)展；
- 但如果，我們講一個(gè)頁(yè)面拆分成一個(gè)個(gè)小的功能塊，每個(gè)功能塊完成屬于自己這部分獨(dú)立的功能，那么之后整個(gè)頁(yè)面的管理和維護(hù)就變得非常容易了；
- 如果我們將一個(gè)個(gè)功能塊拆分后，就可以像搭建積木一下來(lái)搭建我們的項(xiàng)目；
我們需要通過(guò)組件化的思想來(lái)思考整個(gè)應(yīng)用程序：
- 我們將一個(gè)完整的頁(yè)面分成很多個(gè)組件；
- 每個(gè)組件都用于實(shí)現(xiàn)頁(yè)面的一個(gè)功能塊；
- 而每一個(gè)組件又可以進(jìn)行細(xì)分；
- 而組件本身又可以在多個(gè)地方進(jìn)行復(fù)用；
1.2. Vue的組件化
組件化是Vue、React、Angular的核心思想，也是現(xiàn)在前端框架的重點(diǎn)內(nèi)容（包括以后實(shí)戰(zhàn)項(xiàng)目）：
- 前面我們的createApp函數(shù)傳入了一個(gè)對(duì)象App，這個(gè)對(duì)象其實(shí)本質(zhì)上就是一個(gè)組件，也是我們應(yīng)用程序的根組件；
- 組件化提供了一種抽象，讓我們可以開(kāi)發(fā)出一個(gè)個(gè)獨(dú)立可復(fù)用的小組件來(lái)構(gòu)造我們的應(yīng)用；
- 任何的應(yīng)用都會(huì)被抽象成一顆組件樹(shù)；
組件化思想的應(yīng)用：
- 有了組件化的思想，我們?cè)谥蟮拈_(kāi)發(fā)中就要充分的利用它；
- 盡可能的將頁(yè)面拆分成一個(gè)個(gè)小的、可復(fù)用的組件；
- 這樣讓我們的代碼更加方便組織和管理，并且擴(kuò)展性也更強(qiáng)；
接下來(lái)，我們來(lái)學(xué)習(xí)一下在Vue中如何注冊(cè)一個(gè)組件，以及之后如何使用這個(gè)注冊(cè)后的組件。
二. 注冊(cè)一個(gè)組件
2.1. 注冊(cè)全局組件
如果我們現(xiàn)在有一部分內(nèi)容（模板、邏輯等），我們希望將這部分內(nèi)容抽取到一個(gè)獨(dú)立的組件中去維護(hù)，這個(gè)時(shí)候如何注冊(cè)一個(gè)組件呢？
我們先從簡(jiǎn)單的開(kāi)始談起，比如下面的模板希望抽離到一個(gè)單獨(dú)的組件：
<h2>{{title}}</h2>
<p>{{message}}</p>注冊(cè)組件分成兩種：
- 全局組件：在任何其他的組件中都可以使用的組件；
- 局部組件：只有在注冊(cè)的組件中才能使用的組件；
我們先來(lái)學(xué)習(xí)一下全局組件的注冊(cè)：
- 全局組件需要使用我們?nèi)謩?chuàng)建的app來(lái)注冊(cè)組件；
- 通過(guò)component方法傳入組件名稱(chēng)、組件對(duì)象即可注冊(cè)一個(gè)全局組件了；
<template id="my-cpn">
<h2>我是組件標(biāo)題</h2>
<p>我是組件內(nèi)容，哈哈哈哈</p>
</template>
<script src="../js/vue.js"></script>
<script>
const app = Vue.createApp(App);
// 注冊(cè)全局組件(使用app)
app.component("my-cpn", {
template: "#my-cpn"
});
app.mount('#app');
</script>之后，我們可以在App組件的template中直接使用這個(gè)全局組件：
<template id="my-app">
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>
</template>當(dāng)然，我們組件本身也可以有自己的代碼邏輯：
// 注冊(cè)全局組件(使用app)
app.component("my-cpn", {
template: "#my-cpn",
data() {
return {
title: "我是標(biāo)題",
message: "我是內(nèi)容, 哈哈哈哈"
}
},
methods: {
btnClick() {
console.log("btnClick");
}
}
});2.2. 組件的名稱(chēng)
在通過(guò)app.component注冊(cè)一個(gè)組件的時(shí)候，第一個(gè)參數(shù)是組件的名稱(chēng)，定義組件名的方式有兩種：
方式一：使用kebab-case（短橫線(xiàn)分割符）
當(dāng)使用 kebab-case (短橫線(xiàn)分隔命名) 定義一個(gè)組件時(shí)，你也必須在引用這個(gè)自定義元素時(shí)使用 kebab-case，例如 ；
app.component('my-component-name', {
/* ... */
})方式二：使用PascalCase（駝峰標(biāo)識(shí)符）
當(dāng)使用 PascalCase (首字母大寫(xiě)命名) 定義一個(gè)組件時(shí)，你在引用這個(gè)自定義元素時(shí)兩種命名法都可以使用。也就是說(shuō) 和 都是可接受的；
app.component('MyComponentName', {
/* ... */
})import 導(dǎo)入進(jìn)來(lái)的組件最好加.vue
- 1、寫(xiě)template標(biāo)簽時(shí)候有提示
- 2、可以ctrl+鼠標(biāo)左鍵點(diǎn)進(jìn)去
2.3. 注冊(cè)局部組件
全局組件往往是在應(yīng)用程序一開(kāi)始就會(huì)全局組件完成，那么就意味著如果某些組件我們并沒(méi)有用到，也會(huì)一起被注冊(cè)：
- 比如我們注冊(cè)了三個(gè)全局組件：ComponentA、ComponentB、ComponentC；
- 在開(kāi)發(fā)中我們只使用了ComponentA、ComponentB，如果ComponentC沒(méi)有用到但是我們依然在全局進(jìn)行了注冊(cè)，那么就意味著類(lèi)似于webpack這種打包工具在打包我們的項(xiàng)目時(shí)，我們依然會(huì)對(duì)其進(jìn)行打包；
- 這樣最終打包出的JavaScript包就會(huì)有關(guān)于ComponentC的內(nèi)容，用戶(hù)在下載對(duì)應(yīng)的JavaScript時(shí)也會(huì)增加包的大??；
所以在開(kāi)發(fā)中我們通常使用組件的時(shí)候采用的都是局部注冊(cè)：
- 局部注冊(cè)是在我們需要使用到的組件中，通過(guò)components屬性選項(xiàng)來(lái)進(jìn)行注冊(cè)；
- 比如之前的App組件中，我們有data、computed、methods等選項(xiàng)了，事實(shí)上還可以有一個(gè)components選項(xiàng)；
- 該components選項(xiàng)對(duì)應(yīng)的是一個(gè)對(duì)象，對(duì)象中的鍵值對(duì)是 組件的名稱(chēng): 組件對(duì)象；
接下來(lái)，我們看一下局部組件是如何注冊(cè)的：
<div id="app"></div>
<template id="my-app">
<component-a></component-a>
<component-b></component-b>
</template>
<template id="component-a">
<h2>{{title}}</h2>
<p>{{message}}</p>
</template>
<template id="component-b">
<h2>{{title}}</h2>
<p>{{message}}</p>
</template>
<script src="../js/vue.js"></script>
<script>
const ComponentA = {
template: "#component-a",
data() {
return {
title: "我是ComponentA標(biāo)題",
message: "我是ComponentA內(nèi)容, 哈哈哈哈"
}
}
}
const ComponentB = {
template: "#component-b",
data() {
return {
title: "我是ComponentB標(biāo)題",
message: "我是ComponentB內(nèi)容, 呵呵呵呵"
}
}
}
const App = {
template: '#my-app',
components: {
'component-a': ComponentA,
'component-b': ComponentB,
},
data() {
return {
message: "Hello World"
}
}
}
Vue.createApp(App).mount('#app');
</script>在開(kāi)發(fā)中通常我們都會(huì)注冊(cè)局部組件，而不是全局組件。
三. Vue的開(kāi)發(fā)模式
3.1. Vue的開(kāi)發(fā)模式
目前我們使用vue的過(guò)程都是在html文件中，通過(guò)template編寫(xiě)自己的模板、腳本邏輯、樣式等。
但是隨著項(xiàng)目越來(lái)越復(fù)雜，我們會(huì)采用組件化的方式來(lái)進(jìn)行開(kāi)發(fā)：
- 這就意味著每個(gè)組件都會(huì)有自己的模板、腳本邏輯、樣式等；
- 當(dāng)然我們依然可以把它們抽離到單獨(dú)的js、css文件中，但是它們還是會(huì)分離開(kāi)來(lái)；
- 也包括我們的script是在一個(gè)全局的作用域下，很容易出現(xiàn)命名沖突的問(wèn)題；
- 并且我們的代碼為了適配更一些瀏覽器，必須使用ES5的語(yǔ)法；
- 在我們編寫(xiě)代碼完成之后，依然需要通過(guò)工具對(duì)代碼進(jìn)行構(gòu)建、代碼；
所以在真實(shí)開(kāi)發(fā)中，我們可以通過(guò)一個(gè)后綴名為 .vue 的single-file components (單文件組件) 來(lái)解決，并且可以使用webpack或者vite或者rollup等構(gòu)建工具來(lái)對(duì)其進(jìn)行處理。
在這個(gè)組件中我們可以獲得非常多的特性：
代碼的高亮；
- ES6、CommonJS的模塊化能力；
- 組件作用域的CSS；
- 可以使用預(yù)處理器來(lái)構(gòu)建更加豐富的組件，比如TypeScript、Babel、Less、Sass等；
3.2. 如何支持SFC
如果我們想要使用這一的SFC的.vue文件，比較常見(jiàn)的是兩種方式：
- 方式一：使用Vue CLI來(lái)創(chuàng)建項(xiàng)目，項(xiàng)目會(huì)默認(rèn)幫助我們配置好所有的配置選項(xiàng)，可以在其中直接使用.vue文件；
- 方式二：自己使用webpack或rollup或vite這類(lèi)打包工具，對(duì)其進(jìn)行打包處理；
我們最終，無(wú)論是后期我們做項(xiàng)目，還是在公司進(jìn)行開(kāi)發(fā)，通常都會(huì)采用Vue CLI的方式來(lái)完成。
3.3 css作用域污染問(wèn)題
app.vue是helloworld.vue的父組件
如果在app.vue上寫(xiě)了一個(gè)h2.{color:red}
那么不光app.vue的對(duì)應(yīng)字體顏色會(huì)變化，helloworld.vue對(duì)應(yīng)字體顏色也會(huì)變化。
解決方法：
- 不要寫(xiě)h2這種大范圍的css
- 子組件最外層要加上div
四. 認(rèn)識(shí)組件的嵌套
4.1. App單獨(dú)開(kāi)發(fā)
前面我們是將所有的邏輯放到一個(gè)App.vue中：
- 在之前的案例中，我們只是創(chuàng)建了一個(gè)組件App；
- 如果我們一個(gè)應(yīng)用程序?qū)⑺械倪壿嫸挤旁谝粋€(gè)組件中，那么這個(gè)組件就會(huì)變成非常的臃腫和難以維護(hù)；所以組件化的核心思想應(yīng)該是對(duì)組件進(jìn)行拆分，拆分成一個(gè)個(gè)小的組件；
- 再將這些組件組合嵌套在一起，最終形成我們的應(yīng)用程序；
我們來(lái)分析一下下面代碼的嵌套邏輯，假如我們將所有的代碼邏輯都放到一個(gè)App.vue組件中：
<template>
<div>
<h2>Header</h2>
<h2>NavBar</h2>
</div>
<div>
<h2>Banner</h2>
<ul>
<li>商品列表1</li>
<li>商品列表2</li>
<li>商品列表3</li>
<li>商品列表4</li>
<li>商品列表5</li>
</ul>
</div>
<div>
<h2>Footer</h2>
<h2>免責(zé)聲明</h2>
</div>
</template>
<script>
export default {
};
</script>
<style scoped></style>我們會(huì)發(fā)現(xiàn)，將所有的代碼邏輯全部放到一個(gè)組件中，代碼是非常的臃腫和難以維護(hù)的。并且在真實(shí)開(kāi)發(fā)中，我們會(huì)有更多的內(nèi)容和代碼邏輯，對(duì)于擴(kuò)展性和可維護(hù)性來(lái)說(shuō)都是非常差的。
所以，在真實(shí)的開(kāi)發(fā)中，我們會(huì)對(duì)組件進(jìn)行拆分，拆分成一個(gè)個(gè)功能的小組件。
4.2. 組件的拆分
我們可以按照如下的方式進(jìn)行拆分：
Header.vue組件
<template>
<div>
<h2>Header</h2>
<h2>NavBar</h2>
</div>
</template>Main.vue組件：
<template>
<div>
<banner></banner>
<product-list></product-list>
</div>
</template>Banner.vue組件：
<template> <h2>Banner</h2> </template>
ProductList組件：
<template>
<ul>
<li>商品列表1</li>
<li>商品列表2</li>
<li>商品列表3</li>
<li>商品列表4</li>
<li>商品列表5</li>
</ul>
</template>Footer.vue組件：
<template>
<div>
<h2>Footer</h2>
<h2>免責(zé)聲明</h2>
</div>
</template>按照如上的拆分方式后，我們開(kāi)發(fā)對(duì)應(yīng)的邏輯只需要去對(duì)應(yīng)的組件編寫(xiě)就可。
4.3. 組件的通信
上面的嵌套邏輯如下，它們存在如下關(guān)系：
- App組件是Header、Main、Footer組件的父組件；
- Main組件是Banner、ProductList組件的父組件；
在開(kāi)發(fā)過(guò)程中，我們會(huì)經(jīng)常遇到需要組件之間相互進(jìn)行通信：
- 比如App可能使用了多個(gè)Header，每個(gè)地方的Header展示的內(nèi)容不同，那么我們就需要使用者傳遞給Header一些數(shù)據(jù)，讓其進(jìn)行展示；
- 又比如我們?cè)贛ain中一次性請(qǐng)求了Banner數(shù)據(jù)和ProductList數(shù)據(jù)，那么就需要傳遞給他們來(lái)進(jìn)行展示；
- 也可能是子組件中發(fā)生了事件，需要有父組件來(lái)完成某些操作，那就需要子組件向父組件傳遞事件；
總之，在一個(gè)Vue項(xiàng)目中，組件之間的通信是非常重要的環(huán)節(jié)，所以接下來(lái)我們就具體學(xué)習(xí)一下組件之間是如何相互之間傳遞數(shù)據(jù)的；
五. 父子組件的相互通信
5.1. 父組件傳遞給子組件
在開(kāi)發(fā)中很常見(jiàn)的就是父子組件之間通信，比如父組件有一些數(shù)據(jù)，需要子組件來(lái)進(jìn)行展示：
- 這個(gè)時(shí)候我們可以通過(guò)props來(lái)完成組件之間的通信；
什么是Props呢？
- Props是你可以在組件上注冊(cè)一些自定義的attribute；
- 父組件給這些attribute賦值，子組件通過(guò)attribute的名稱(chēng)獲取到對(duì)應(yīng)的值；
Props有兩種常見(jiàn)的用法：
- 方式一：字符串?dāng)?shù)組，數(shù)組中的字符串就是attribute的名稱(chēng)；
- 方式二：對(duì)象類(lèi)型，對(duì)象類(lèi)型我們可以在指定attribute名稱(chēng)的同時(shí)，指定它需要傳遞的類(lèi)型、是否是必須的、默認(rèn)值等等；
5.1.1. props的數(shù)組用法
封裝ShowMessage.vue組件：
<template>
<div>
<h2>組件展示的title:{{title}}</h2>
<p>組件展示的content: {{content}}</p>
</div>
</template>
<script>
export default {
props: ["title", "content"]
}
</script>通過(guò)App.vue傳遞給組件數(shù)據(jù)：
<template>
<div>
<show-message title="哈哈哈" content="我是哈哈哈"></show-message>
<show-message title="呵呵呵" content="我是呵呵呵"></show-message>
</div>
</template>
<script>
import ShowMessage from './ShowMessage.vue';
export default {
components: {
ShowMessage
}
}
</script>當(dāng)然，我們也可以將data中的數(shù)據(jù)傳遞給子組件：
<template>
<div>
<show-message :title="title1" :content="content1"></show-message>
<show-message :title="title2" :content="content2"></show-message>
</div>
</template>
<script>
import ShowMessage from './ShowMessage.vue';
export default {
components: {
ShowMessage
},
data() {
return {
title1: "哈哈哈",
content1: "我是哈哈哈",
title2: "呵呵呵",
content2: "我是呵呵呵"
}
}
}
</script>當(dāng)然，我們也可以直接傳遞一個(gè)對(duì)象：
<template>
<div>
<show-message :title="message.title" :content="message.content"></show-message>
<show-message v-bind="message"></show-message>
</div>
</template>
<script>
import ShowMessage from './ShowMessage.vue';
export default {
components: {
ShowMessage
},
data() {
return {
message: {
title: "嘿嘿嘿",
content: "我是嘿嘿嘿"
}
}
}
}
</script>5.1.2. props的對(duì)象用法
數(shù)組用法中我們只能說(shuō)明傳入的attribute的名稱(chēng)，并不能對(duì)其進(jìn)行任何形式的限制，接下來(lái)我們來(lái)看一下對(duì)象的寫(xiě)法是如何讓我們的props變得更加完善的。
ShowMessage.vue的props對(duì)象寫(xiě)法：
<template>
<div>
<h2>組件展示的title:{{title}}</h2>
<p>組件展示的content: {{content}}</p>
</div>
</template>
<script>
export default {
props: { // 指定類(lèi)型：
title: String,
// 指定類(lèi)型，同時(shí)指定是否必選、默認(rèn)值：
content: { type: String,require: true,default: "哈哈哈" } } }
</script>細(xì)節(jié)一：那么type的類(lèi)型都可以是哪些呢？
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
細(xì)節(jié)二：對(duì)象類(lèi)型的其他寫(xiě)法
<script>
export default {
props: { // 基礎(chǔ)的類(lèi)型檢查 (`null` 和 `undefined` 會(huì)通過(guò)任何類(lèi)型驗(yàn)證)
propA: Number,
// 多個(gè)可能的類(lèi)型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 帶有默認(rèn)值的數(shù)字
propD: {
type: Number,
default: 100
},
// 帶有默認(rèn)值的對(duì)象
propE: {
type: Object, // 對(duì)象或數(shù)組默認(rèn)值必須從一個(gè)工廠(chǎng)函數(shù)獲取
default () {
return {
message: 'hello'
}
}
},
// 自定義驗(yàn)證函數(shù)
propF: {
validator(value) { // 這個(gè)值必須匹配下列字符串中的一個(gè)
return ['success', 'warning', 'danger'].includes(value)
}
},
// 具有默認(rèn)值的函數(shù)
propG: {
type: Function, // 與對(duì)象或數(shù)組默認(rèn)值不同，這不是一個(gè)工廠(chǎng)函數(shù) —— 這是一個(gè)用作默認(rèn)值的函數(shù)
default () {
return 'Default function'
}
}
},
}
</script>細(xì)節(jié)三：Prop 的大小寫(xiě)命名(camelCase vs kebab-case)
- HTML 中的 attribute 名是大小寫(xiě)不敏感的，所以瀏覽器會(huì)把所有大寫(xiě)字符解釋為小寫(xiě)字符；
- 這意味著當(dāng)你使用 DOM 中的模板時(shí)，camelCase (駝峰命名法) 的 prop 名需要使用其等價(jià)的 kebab-case (短橫線(xiàn)分隔命名) 命名；
ShowMessage.vue組件：
<template>
<div>
<p>{{messageInfo}}</p>
</div>
</template>
<script>
export default {
props: {
messageInfo: String,
}
}
</script>App.vue組件中傳入：
<template> <div> <show-message messageInfo="哈哈哈"></show-message> <show-message message-info="哈哈哈"></show-message>//推薦這個(gè) </div> </template>
重申一次，如果你使用.vue文件寫(xiě)，那么這個(gè)限制就不存在，因?yàn)閙essageInfo是由vueloader編譯的，他認(rèn)識(shí)。如果使用template：xxx，那么必須使用kebab-case
5.1.3. 非Prop的Attribute
什么是非Prop的Attribute呢？
- 當(dāng)我們傳遞給一個(gè)組件某個(gè)屬性，但是該屬性并沒(méi)有定義對(duì)應(yīng)的props或者emits時(shí)，就稱(chēng)之為 非Prop的Attribute；
- 常見(jiàn)的包括class、style、id屬性等；
Attribute繼承
當(dāng)組件有單個(gè)根節(jié)點(diǎn)時(shí)，非Prop的Attribute將自動(dòng)添加到根節(jié)點(diǎn)的Attribute中：
禁用Attribute繼承
如果我們不希望組件的根元素繼承attribute，可以在組件中設(shè)置 inheritAttrs: false：
- 禁用attribute繼承的常見(jiàn)情況是需要將attribute應(yīng)用于根元素之外的其他元素；
- 我們可以通過(guò) $attrs來(lái)訪(fǎng)問(wèn)所有的 非props的attribute；
<template>
<div> 我是NotPropAttribue組件 <h2 :class="$attrs.class"></h2>
</div>
</template>
<script>
export default {
inheritAttrs: false
}
</script>多個(gè)根節(jié)點(diǎn)的attribute
多個(gè)根節(jié)點(diǎn)的attribute如果沒(méi)有顯示的綁定，那么會(huì)報(bào)警告，我們必須手動(dòng)的指定要綁定到哪一個(gè)屬性上：
<template> <div :class="$attrs.class">我是NotPropAttribue組件1</div> <div>我是NotPropAttribue組件2</div> <div>我是NotPropAttribue組件3</div> </template>
5.2. 子組件傳遞給父組件
什么情況下子組件需要傳遞內(nèi)容到父組件呢？
- 當(dāng)子組件有一些事件發(fā)生的時(shí)候，比如在組件中發(fā)生了點(diǎn)擊，父組件需要切換內(nèi)容；
- 子組件有一些內(nèi)容想要傳遞給父組件的時(shí)候；
我們?nèi)绾瓮瓿缮厦娴牟僮髂兀?/p>
- 首先，我們需要在子組件中定義好在某些情況下觸發(fā)的事件名稱(chēng)；
- 其次，在父組件中以v-on的方式傳入要監(jiān)聽(tīng)的事件名稱(chēng)，并且綁定到對(duì)應(yīng)的方法中；
- 最后，在子組件中發(fā)生某個(gè)事件的時(shí)候，根據(jù)事件名稱(chēng)觸發(fā)對(duì)應(yīng)的事件；
5.2.1. 自定義事件的流程
我們封裝一個(gè)CounterOperation.vue的組件：
- 內(nèi)部其實(shí)是監(jiān)聽(tīng)兩個(gè)按鈕的點(diǎn)擊，點(diǎn)擊之后通過(guò) this.$emit的方式發(fā)出去事件；
<template>
<div> <button @click="increment">+1</button> <button @click="decrement">-1</button> </div>
</template>
<script>
export default {
emits: ["addOne", "subOne"],
methods: {
increment() {
this.$emit("addOne");
},
decrement() {
this.$emit("subOne");
}
}
}
</script>我們可以在App.vue中來(lái)監(jiān)聽(tīng)自定義組件發(fā)出的事件：
<template>
<div>
<h2>當(dāng)前計(jì)數(shù): {{counter}}</h2>
<counter-operation @addOne="add" @subOne="sub"></counter-operation>
</div>
</template>
<script>
import CounterOperation from './CounterOperation.vue';
export default {
components: {
CounterOperation
},
data() {
return {
counter: 0
}
},
methods: {
add() {
this.counter++
},
sub() {
this.counter--;
}
}
}
</script>5.2.2. 自定義事件的參數(shù)
自定義事件的時(shí)候，我們也可以傳遞一些參數(shù)給父組件：
<template>
<div> <button @click="increment">+1</button> <button @click="incrementTen">+10</button> <button @click="decrement">-1</button>
</div>
</template>
<script>
export default {
methods: {
incrementTen() {
this.$emit("addTen", 10)
}
}
}
</script>
<style scoped></style>5.2.3. 自定義事件的驗(yàn)證
在vue3當(dāng)中，我們可以對(duì)傳遞的參數(shù)進(jìn)行驗(yàn)證：
<template>
<div> <button @click="incrementTen">+10</button> </div>
</template>
<script>
export default {
emits: {
addTen: function(payload) {
if (payload === 10) {
return true
}
return false;
}
},
methods: {
incrementTen() {
this.$emit("addTen", 10)
}
}
}
</script>5.3. 組件間通信案例練習(xí)
我們來(lái)做一個(gè)相對(duì)綜合的練習(xí)：
5.3.1. TabControl實(shí)現(xiàn)
TabControl.vue的實(shí)現(xiàn)代碼：
<template>
<div class="tab-control"> <template v-for="(item, index) in titles" :key="item">
<div class="tab-control-item" @click="itemClick(index)" :class="{active: index === currentIndex}"> <span class="underline">{{ item }}</span>
</div>
</template> </div>
</template>
<script>
export default {
props: {
titles: {
type: Array,
default () {
return [];
},
},
},
emits: ["titleClick"],
data() {
return {
currentIndex: 0
}
},
methods: {
itemClick(index) {
this.currentIndex = index;
this.$emit("titleClick", index);
},
},
};
</script>
<style scoped>
.tab-control {
display: flex;
justify-content: space-between;
}
.tab-control-item {
flex: 1;
text-align: center;
height: 40px;
line-height: 40px;
}
.tab-control-item.active {
color: red;
}
.tab-control-item.active span {
display: inline-block;
border-bottom: 4px solid red;
padding: 0 10px;
}
</style>5.3.2. App中的使用
我們?cè)贏pp中的使用過(guò)程如下：
<template>
<div>
<tab-control :titles="titles" @titleClick="titleClick"></tab-control>
<h2>{{contents[currentIndex]}}</h2>
</div>
</template>
<script>
import TabControl from './TabControl.vue';
export default {
components: {
TabControl
},
data() {
return {
titles: ["衣服", "鞋子", "褲子"],
contents: ["衣服頁(yè)面", "鞋子頁(yè)面", "褲子頁(yè)面"],
currentIndex: 0
}
},
methods: {
titleClick(index) {
this.currentIndex = index;
}
}
}
</script>總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
axios請(qǐng)求二次封裝之避免重復(fù)發(fā)送請(qǐng)求
在做vue中大型項(xiàng)目的時(shí)候,官方推薦使用axios,但是原生的axios可能對(duì)項(xiàng)目的適配不友好,所以在工程開(kāi)始的來(lái)封裝一下axios,下面這篇文章主要給大家介紹了關(guān)于axios請(qǐng)求二次封裝之避免重復(fù)發(fā)送請(qǐng)求的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了Vue extend的基本用法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
typescript 為 javaScript的超集，這意味著它支持所有都JavaScript都語(yǔ)法。這篇文章主要介紹了vue框架中props的typescript用法,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了vue中使用路由改瀏覽器標(biāo)題和圖標(biāo)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue動(dòng)態(tài)顯示圖片報(bào)錯(cuò)404的解決
這篇文章主要介紹了vue動(dòng)態(tài)顯示圖片報(bào)錯(cuò)404的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue-resource 攔截器interceptors使用詳解
這篇文章主要介紹了vue-resource 攔截器interceptors使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
vue 1.0 結(jié)合animate.css定義動(dòng)畫(huà)效果
本文分步驟給大家介紹了Vue 1.0自定義動(dòng)畫(huà)效果，vue1.0代碼結(jié)合animate.css定義動(dòng)畫(huà)，頁(yè)面一定要引入animate.cdd，具體實(shí)例代碼大家參考下本文2018-07-07
vue3使用ref獲取dom結(jié)果為'null'的原因詳析
這篇文章主要給大家介紹了關(guān)于vue3使用ref獲取dom結(jié)果為'null'的原因詳析,ref是Vue3中一個(gè)非常重要的功能,它可以用來(lái)獲取DOM節(jié)點(diǎn),從而實(shí)現(xiàn)對(duì)DOM節(jié)點(diǎn)的操作,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了Vue作用域插槽實(shí)現(xiàn)方法及作用詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
Vue3中createWebHistory和createWebHashHistory的區(qū)別詳析
這篇文章主要給大家介紹了關(guān)于Vue3中createWebHistory和createWebHashHistory區(qū)別的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-06-06