淺談VUE uni-app 自定義組件
更新時間：2021年10月19日 16:43:48 作者：上晴下雪
這篇文章主要介紹了uni-app 的自定義組件，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
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('點了子組件');
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ì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
這篇文章主要為大家介紹了Vue之ref屬性，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助，希望能夠給你帶來幫助2021-11-11
這篇文章主要介紹了vue3項目如何使用prettier格式化代碼問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue3+vue-cli4中使用svg的方式詳解(親測可用)
最近在做個vue的項目,從各種github上的開源庫上借鑒開發(fā)方法,給大家分享下,這篇文章主要給大家介紹了關(guān)于vue3+vue-cli4中使用svg的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue v-text指令簡單使用方法,結(jié)合實例形式分析了v-text指令文本輸出顯示簡單操作技巧,需要的朋友可以參考下2019-09-09
詳解vue項目中如何引入全局sass/less變量、function、mixin
這篇文章主要介紹了詳解vue項目中如何引入全局sass/less變量、function、mixin，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了vue cli4.0 如何配置環(huán)境變量，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了Vue八大生命周期鉤子函數(shù),生命周期函數(shù)，就是在某個時刻會自動執(zhí)行的函數(shù),本文帶你了解八大生命周期鉤子函數(shù),一起來看看吧2023-03-03
經(jīng)過一段時間的探索,前端后端都有大致的樣子了,下面就是部署到服務(wù)器,這篇文章主要給大家介紹了關(guān)于將VUE項目部署到服務(wù)器的詳細(xì)步驟,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
下面小編就為大家分享一篇vue父組件向子組件傳遞多個數(shù)據(jù)的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03