uni-app自定義組件詳細代碼示例
前言
在uni-app中，我們可以使用Vue的組件語法來自定義組件，其中包括組件的數據、屬性、事件以及方法等。自定義組件可以讓我們在不同的項目中很方便地重用和修改組件，同時可以提高組件庫的擴展性和應用的靈活性。
在uni-app中，我們可以在項目的component目錄下存放組件，uni-app只支持vue單文件組件(.vue)。
一、注冊
1、全局注冊
uni-app 支持配置全局組件，需在 main.js 里進行全局注冊，注冊后就可在所有頁面里使用該組件。
//main.js 里進行全局導入和注冊
import Vue from 'vue'
import pageHead from './components/page-head.vue'
Vue.component('page-head',pageHead)
//index.vue 里可直接使用組件
<template>
<view>
<page-head></page-head>
</view>
</template>
2、局部注冊
頁面引入組件有兩種方式，推薦使用 easycom 方式引入。
1.傳統(tǒng)vue規(guī)范
在 index.vue 頁面中，通過 import 方式引入組件 ，在 components 選項中定義你想要使用的組件。
<!-- 在index.vue引入 uni-badge 組件-->
<template>
<view>
<!-- 3.使用組件 -->
<uni-badge text="1"></uni-badge>
</view>
</template>
<script>
//1.導入組件（這步屬于傳統(tǒng)vue規(guī)范，但在uni-app的easycom下可以省略這步）
import uniBadge from '@/components/uni-badge/uni-badge.vue';
export default {
//2.注冊組件（這步屬于傳統(tǒng)vue規(guī)范，但在uni-app的easycom下可以省略這步）
components:{uniBadge }
}
</script>
2.easycom 方式
將組件引入精簡為一步。只要組件安裝在項目的 components 目錄下，并符合 components/組件名稱/組件名稱.vue 目錄結構。就可以不用引用、注冊，直接在頁面中使用。
<!-- 在index.vue引入 uni-badge 組件-->
<template>
<view>
<!-- 直接使用組件 -->
<uni-badge text="1"></uni-badge>
</view>
</template>
<script>
// 這里不用import引入，也不需要在components內注冊uni-badge組件。template里就可以直接用
export default {
data() {
return {
}
}
}
</script>
二、父子組件通信
父子組件之間的通信有兩種方式：父傳子和子傳父。其中，父傳子的方式是通過props來實現的，子組件通過props來接收外界傳遞到組件內部的值。而子傳父的方式則是通過$emit觸發(fā)事件進行傳遞參數，父組件通過監(jiān)聽這個事件來接收子組件傳遞過來的數據 。
父傳子組件的示例代碼：
父組件通過props屬性將message傳遞給子組件。子組件則通過props接收這個值并在模板中顯示出來。
<!-- 父組件 -->
<template>
<div>
<child-component :message="parentMessage"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
data() {
return {
parentMessage: 'Hello from parent!',
};
},
};
</script>
<!-- 子組件 -->
<template>
<div>
{{ message }}
</div>
</template>
<script>
export default {
props: ['message'],
};
</script>
子傳父組件的示例代碼：
子組件通過$emit觸發(fā)了一個名為childEvent的事件，并將數據作為參數傳遞給父組件。父組件則通過監(jiān)聽這個事件來接收子組件傳遞過來的數據，并在handleChildEvent方法中進行處理。
<!-- 父組件 -->
<template>
<div>
<child-component @childEvent="handleChildEvent"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
methods: {
handleChildEvent(data) {
console.log('Received data from child component:', data);
},
},
};
</script>
<!-- 子組件 -->
<template>
<div>
<button @click="sendDataToParent">Send data to parent</button>
</div>
</template>
<script>
export default {
methods: {
sendDataToParent() {
const data = 'Hello from child!';
this.$emit('childEvent', data);
},
},
};
</script>三、uni.$on與uni.$emit
uni.$on是uni-app中的一個全局事件監(jiān)聽方法，用于在頁面或組件外部監(jiān)聽指定事件的觸發(fā)。當事件被觸發(fā)時，會執(zhí)行傳入的回調函數。使用uni.$on方法可以避免在每個頁面或組件中都手動注冊和注銷事件監(jiān)聽器的問題，提高了代碼的復用性和可維護性。
uni.$emit是一個全局事件觸發(fā)器，用于向父組件或全局事件觸發(fā)器發(fā)送事件。
示例代碼：
//子組件觸發(fā)自定義事件
<template>
<div>
<button @click="sendDataToParent">Send data to parent</button>
</div>
</template>
<script>
export default {
methods: {
sendDataToParent() {
const data = 'Hello from child!';
uni.$emit('childEvent', data); // 觸發(fā)自定義事件
},
},
};
</script>
// 在父組件中監(jiān)聽子組件觸發(fā)的自定義事件
export default {
onLoad() {
uni.$on('childEvent', this.handleChildEvent); // 注冊事件監(jiān)聽器
},
beforeDestroy() {
uni.$off('childEvent', this.handleChildEvent); // 注銷事件監(jiān)聽器
},
methods: {
handleChildEvent(data) {
console.log('Received data from child component:', data);
},
},
};四、slot插槽
插槽是一種用于向子組件傳遞內容的方式。插槽實質是對子組件的擴展，父組件通過slot插槽向子組件內部指定位置傳遞內容。插槽顯不顯示、怎樣顯示是由父組件來控制的，而插槽在哪里顯示就由子組件來進行控制。
插槽的示例代碼：
<!-- 子組件 -->
<template>
<div>
<slot name="header"></slot> <!-- 使用具名插槽 -->
<slot></slot> <!-- 使用默認插槽 -->
<slot name="footer"></slot> <!-- 使用具名插槽 -->
</div>
</template>
<script>
export default {};
</script>
<!-- 父組件 -->
<template>
<div>
<child-component>
<template v-slot:header>
<h2>組件的頭部</h2>
</template>
<p>組件的內容。</p>
<template v-slot:footer>
<button @click="handleClick">點擊我</button>
</template>
</child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
};
</script>五、ref
被用來給元素或子組件注冊引用信息，引用信息將會注冊在父組件的 $refs 對象上。
如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件實例。在非H5端，只能用于獲取自定義組件實例，不能用于獲取內置組件實例(如：view、text)。
<!-- 非H5端不支持通過this.$refs.content來獲取view實例 --> <view ref="content">hello</view> <!-- 支持通過this.$refs.child來獲取child-component實例 --> <child-component ref="child"></child-component>
代碼示例：
<!-- base-input子組件頁面 -->
<template>
<view>
<input :focus="isFocus" type="text" placeholder="請輸入內容" />
</view>
</template>
<script>
export default {
name:"base-input",
data() {
return {
"isFocus":false
};
},
methods:{
focus(){
this.isFocus = true
}
}
}
</script>
<!-- index 父組件頁面 -->
<template>
<view>
<base-input ref="usernameInput"></base-input>
<button type="default" @click="getFocus">獲取焦點</button>
</view>
</template>
<script>
export default {
methods:{
getFocus(){
//通過組件定義的ref調用focus方法
this.$refs.usernameInput.focus()
}
}
}
</script>總結
到此這篇關于uni-app自定義組件的文章就介紹到這了,更多相關uni-app自定義組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue使用vue-video-player無法播放本地視頻的問題及解決
這篇文章主要介紹了vue使用vue-video-player無法播放本地視頻的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細介紹了vue+element實現動態(tài)加載表單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要介紹了解決Vue的組件屬性this不存在問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
這篇文章主要為大家詳細介紹了vue+elementUI實現動態(tài)面包屑，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了VueCli3構建TS項目的方法步驟，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
webpack+vue-cil 中proxyTable配置接口地址代理操作
這篇文章主要介紹了webpack+vue-cil 中proxyTable配置接口地址代理操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue2.0 路由模式mode="history"的作用，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-10-10
這篇文章主要給大家介紹了關于利用vue對比兩組數據差異的可視化組件的相關資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友可以參考下2021-09-09
vue3 element-plus el-tree自定義圖標方式
這篇文章主要介紹了vue3 element-plus el-tree自定義圖標方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue-axios 設置請求頭問題,文中給大家提到了axios設置請求頭內容的方法，需要的朋友可以參考下2018-12-12