課程地址：【新課uniapp零基礎(chǔ)入門到項目打包（微信小程序/H5/vue/安卓apk）全掌握】 https://www.bilibili.com/video/BV1mT411K7nW/?p=12&share_source=copy_web&vd_source=b1cb921b73fe3808550eaf2224d1c155
四、vue組件
uni-app官網(wǎng)
組件，無論是小程序還是vue，都是非常關(guān)鍵的。
現(xiàn)在單頁面程序，主要的依據(jù)就是組件。
組件的概念，可以將App.vue當(dāng)做主組件，下面的vue文件都是若干個小組件。
component，小組件，可以公用。
組件優(yōu)點：
4.1 easycom自動導(dǎo)入自定義組件
組件的注冊
全局注冊（需要掛載到vue里，適用于頁面頭部和底部十分公用的部分）和局部注冊（寫vue文件時局部注冊用的較多）
局部注冊
局部注冊之前，在需要引用該組件的頁面，導(dǎo)入你想使用的組件。
頁面引入組件方式
4.1.1 介紹
2 通過uniapp的easycom。
4.1.2?具體實現(xiàn)
步驟1：在項目demo1右鍵，創(chuàng)建components目錄
步驟2：創(chuàng)建組件，如圖。?
創(chuàng)建組件成功。
步驟3：自定義組件
步驟4：使用組件
效果
使用自定義組件生效。
4.2 子組件通過Prop接收父組件傳過來的值
創(chuàng)建一個名為pubTitle的公共組件，到components文件夾下。自定義組件pubTitle。
<template>
<view class="pubTitle">
<view class="big">文章的標(biāo)題</view>
<view class="small">副標(biāo)題</view>
<view class="line"></view>
</view>
</template>
<script>
export default {
name:"pubTitle",
data() {
return {
};
}
}
</script>
<style lang="scss">
.pubTitle {
padding: 60rpx 30rpx;
text-align: center;
.big {
font-size: 50rpx;
font-weight: 700;
color: #333;
}
.small {
font-size: 28rpx;
color: #888;
}
.line {
display: inline-block;
width: 80rpx;
height: 8rpx;
background: #1aa034;
border-radius: 10rpx;
}
}
</style>在index首頁里引入公共組件pubTitle。
注意：這里index使用的公共組件pubTitle也可以轉(zhuǎn)為短橫線連接的，即pub-title。
4.2.1 動態(tài)標(biāo)題
uni-app官網(wǎng)
在index首頁，list新聞列表頁和about關(guān)于我們頁，都是用了pubTitle公共組件。
標(biāo)題顯示的內(nèi)容都是一樣的，如下圖。
現(xiàn)在想動態(tài)顯示不同頁面的標(biāo)題。
uni-app官網(wǎng)
Prop傳值
步驟① 在子組件里接收屬性。如圖，在pubTitle子組件里接收title屬性。
步驟②，在父組件里傳入屬性值。
效果
副標(biāo)題同理，
4.2.2 props綁定動態(tài)值及數(shù)據(jù)類型默認(rèn)值
這里是在template里設(shè)置的標(biāo)題
?要綁定js里的值，那么就要綁定動態(tài)值，首先在data里定義text。
然后給子組件傳屬性值的地方綁定該屬性值，
vue官網(wǎng)介紹的Props，Props | Vue.js
數(shù)據(jù)類型默認(rèn)值，將props由數(shù)據(jù)改為對象，可以設(shè)置props綁定的值的默認(rèn)類型。
不同數(shù)據(jù)類型默認(rèn)形式
props: {
title: {
type: String,
default: "默認(rèn)標(biāo)題"
},
subtitle: {
type: String,
default: "默認(rèn)副標(biāo)題"
},
time: {
type: Number,
default: Date.now()
},
list: {
type: Array,
default() {
return [1, 2, 3];
}
},
obj: {
type: Object,
default() {
return {name: '無名氏', gender: '3'};
}
}
},4.3 emit子向父組件傳值
子組件pubTitle向父組件傳值。
新建一個myevent組件，然后在about里引入。about是父組件，myevent是子組件。
父組件向子組件傳值（4.2節(jié)的內(nèi)容，復(fù)習(xí)一下）。
步驟1：定義要傳的值的具體值；
步驟2：調(diào)用子組件。
步驟3：傳入要傳的值。
子組件接收父組件傳來的值。
步驟1：通過props接收父組件傳來的值，可以設(shè)置默認(rèn)類型等。
步驟2：在template中使用接收的值。
子組件向父組件傳值。
input | uni-app官網(wǎng)。inpout的@input事件。只要輸入框改變，就會觸發(fā)input事件
子組件一般不會進(jìn)行數(shù)據(jù)處理，都會將數(shù)據(jù)交給父組件去處理。
步驟1：給子組件綁定input事件
步驟2：通過事件處理函數(shù)將input輸入框的內(nèi)容傳給父組件。通過this.$emit方法傳遞，第一個參數(shù)是自定義的方法名，第2個參數(shù)是要傳遞的值。
步驟3：父組件接收子組件傳來的值
父組件綁定自定義事件，這里的自定義事件與子組件的自定義方法名同名。然后在事件處理函數(shù)里接收子組件傳來的值。
?4.4 事件修飾符
4.4.1 native修飾符
問題：給自定義組件添加click事件，無法觸發(fā)。
如果要自定義組件也執(zhí)行原生的事件，需要加上.native修飾符，這樣才會被認(rèn)為是原生事件，否則會被認(rèn)為是自定義事件，如下。
<myevent title="組件間的傳值" @myvalue="onmyvalue" @click.native="onClick"></myevent>4.4.2 父子間通信傳值案例
父組件里點擊一個按鈕，彈出一個彈窗，彈窗有一個關(guān)閉按鈕，點擊彈窗的關(guān)閉按鈕可以關(guān)閉彈窗，父組件就看不到彈窗了。
新建一個組件。
子組件接收的從父組件傳來的值，最好不要改變。父組件傳給子組件的值，不允許在子組件里修改。因為這個值是響應(yīng)式的，因此如果在子組件修改了這個值，可能父組件會產(chǎn)生不同步的數(shù)據(jù)。
正常實現(xiàn)
父組件about.vue
子組件mypop.vue
缺點：值傳來傳去的很麻煩。但是這個方式也是需要了解的。
4.4.3 sync修飾符
uni-app官網(wǎng)
對4.4.2案例來回傳值進(jìn)行簡化。
方案一：
父組件
子組件
但是我本地運行出錯，不知道為什么。就這樣吧，下一個。
進(jìn)一步簡化：
直接給要傳的值加一個修飾符sync（代表響應(yīng)式的修飾符），代表數(shù)據(jù)是可以響應(yīng)的。接收子組件傳值的自定義事件可以刪掉。
理解：將sync修飾符理解為v-model，實現(xiàn)父組件改變值對子組件進(jìn)行響應(yīng)，同時子組件改變值也會對父組件進(jìn)行響應(yīng)。
父組件
子組件，不做任何處理，維持原樣。
全部代碼
父組件
<template>
<view>
<myevent :title="title" @myvalue="onmyvalue"></myevent>
<pubTitle></pubTitle>
<pub-title></pub-title>
<text>關(guān)于我們</text>
<myevent title="組件間的傳值" @myvalue="onmyvalue" @click.native="onClick"></myevent>
-----------------------------
<button @click="onClickBtn" >開啟</button>
<!-- <mypop :state="state" @stateEnv="onStateEnv"></mypop> -->
<mypop :state.sync="state"></mypop>
</view>
</template>
<script>
export default {
data() {
return {
title: "組件間的傳值",
state: false
};
},
methods: {
onmyvalue(e) {
console.log(e);
},
onClick() {
console.log(123);
},
onClickBtn() {
this.state = true;
}
}
}
</script>
<style lang="scss">
</style>
子組件
<template>
<view>
<view>----彈出框樣式-----</view>
<view class="box" :style="{height: state?'300px':'0'}"></view>
<button size="mini" @click="onClickBtn">關(guān)閉</button>
</view>
</template>
<script>
export default {
name:"mypop",
data() {
return {
};
},
props: {
state: {
type: Boolean,
default: false
}
},
methods: {
onClickBtn() {
this.$emit("update:state", false);
}
}
}
</script>
<style lang="scss">
.box {
width: 300px;
height: 300px;
background-color: pink;
}
</style>自己悟一悟。文章來源：http://www.zghlxwxcb.cn/news/detail-807636.html
4.5 生命周期
全局配置 | uni-app官網(wǎng)文章來源地址http://www.zghlxwxcb.cn/news/detail-807636.html
到了這里，關(guān)于【b站咸蝦米】chapter4_vue組件_新課uniapp零基礎(chǔ)入門到項目打包（微信小程序/H5/vue/安卓apk）全掌握的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
