淺談VUE uni-app 自定義組件
更新時(shí)間：2021年10月19日 16:43:48 作者：上晴下雪
這篇文章主要介紹了uni-app 的自定義組件，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
1.父組件向子組件傳遞數(shù)據(jù)可以通過 props
2.子組件向父組件傳遞數(shù)據(jù)可以通過自定義事件，父組件自定義事件，子組件觸發(fā)父組件的事件，并傳傳遞數(shù)據(jù)
3.子組件可以定義插槽slot，讓父組件自定義要顯示的內(nèi)容
4.使用easycom規(guī)范，可以真接使用組件
page/news/news.vue
<template>
<view>
<veiw>自定義組件使用規(guī)范</veiw>
<card color="red" @fclick="fclick"></card>
<card color="yellow">黃色組件</card>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
fclick(msg){
console.log('父組件收到子組件傳遞的值：'+msg);
}
}
}
</script>
<style>
</style>
組件：components/card/card.vue
<template>
<view :style="{background:color}" @click="zclick">
自定義組件<slot></slot>
</view>
</template>
<script>
export default {
name:"card",
props:{
color:{
type:String,
default:'white'
}
},
data() {
return {
};
},
methods:{
zclick(){
console.log('點(diǎn)了子組件');
this.$emit('fclick','定擊事件傳遞給父組件');
}
}
}
</script>
<style>
</style>
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！
相關(guān)文章
vue3的ref、isRef、toRef、toRefs、toRaw詳細(xì)介紹
本文詳細(xì)講解了vue3的ref、isRef、toRef、toRefs、toRaw，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
這篇文章主要為大家介紹了Vue之ref屬性，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助，希望能夠給你帶來幫助2021-11-11
vue3項(xiàng)目如何使用prettier格式化代碼
這篇文章主要介紹了vue3項(xiàng)目如何使用prettier格式化代碼問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue3+vue-cli4中使用svg的方式詳解(親測可用)
最近在做個(gè)vue的項(xiàng)目,從各種github上的開源庫上借鑒開發(fā)方法,給大家分享下,這篇文章主要給大家介紹了關(guān)于vue3+vue-cli4中使用svg的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue v-text指令簡單使用方法,結(jié)合實(shí)例形式分析了v-text指令文本輸出顯示簡單操作技巧,需要的朋友可以參考下2019-09-09
詳解vue項(xiàng)目中如何引入全局sass/less變量、function、mixin
這篇文章主要介紹了詳解vue項(xiàng)目中如何引入全局sass/less變量、function、mixin，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了vue cli4.0 如何配置環(huán)境變量，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了Vue八大生命周期鉤子函數(shù),生命周期函數(shù)，就是在某個(gè)時(shí)刻會(huì)自動(dòng)執(zhí)行的函數(shù),本文帶你了解八大生命周期鉤子函數(shù),一起來看看吧2023-03-03
將VUE項(xiàng)目部署到服務(wù)器的詳細(xì)步驟
經(jīng)過一段時(shí)間的探索,前端后端都有大致的樣子了,下面就是部署到服務(wù)器,這篇文章主要給大家介紹了關(guān)于將VUE項(xiàng)目部署到服務(wù)器的詳細(xì)步驟,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
vue父組件向子組件傳遞多個(gè)數(shù)據(jù)的實(shí)例
下面小編就為大家分享一篇vue父組件向子組件傳遞多個(gè)數(shù)據(jù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03