淺談VUE uni-app 自定義組件

Posted on by

1.父組件向子組件傳遞數據可以通過 props

2.子組件向父組件傳遞數據可以通過自定義事件，父組件自定義事件，子組件觸發父組件的事件，並傳傳遞數據

3.子組件可以定義插槽slot，讓父組件自定義要顯示的內容

4.使用easycom規范，可以真接使用組件

page/news/news.vue

<template>
	<view>
		<veiw>自定義組件使用規范</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>

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容！

推薦閱讀：