亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

淺談VUE uni-app 自定義組件

 更新時(shí)間：2021年10月19日 16:43:48   作者：上晴下雪  
這篇文章主要介紹了uni-app 的自定義組件，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

1.父組件向子組件傳遞數(shù)據(jù)可以通過(guò) props

2.子組件向父組件傳遞數(shù)據(jù)可以通過(guò)自定義事件，父組件自定義事件，子組件觸發(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é)

本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！

相關(guān)文章

最新評(píng)論