uniapp組件傳值的方法有哪些

這篇文章主要介紹“uniapp組件傳值的方法有哪些”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“uniapp組件傳值的方法有哪些”文章能幫助大家解決問(wèn)題。

父組件給子組件傳值

創(chuàng)建子組件comp.vue，然后在index.vue父頁(yè)面使用該組件：

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<comp :name="name" @getMsg="openMsg"></comp>
	</view>
</template>
<script>
	import comp from '../../components/comp.vue'
	import phone from '../../components/phone.vue'
	import phoneItem from '../../components/phoneItem.vue'
	export default {
		components: {
			comp,
		},
		data(){
			name: 'parent',
		}
	}
</script>

可以看到在上面的index頁(yè)面中有一個(gè)數(shù)據(jù)為name，我們下面使用props將父組件的name值傳給子組件comp.vue。首先在父組件中使用子組件的上面進(jìn)行綁定傳參：

<comp :name="name" ></comp>

然后在子組件comp.vue中使用props接收父組件傳過(guò)來(lái)的值：

然后設(shè)置一個(gè)點(diǎn)擊事件打印拿到的name的值

<script>
	export default {
		// 接收父?jìng)鹘o子的參數(shù)
		props:{
			name: String
		},
		methods: {
			sendMsg() {
				console.log(this.name)
			}
		}
	}
</script>

打印的值：

子組件給父組件傳值

在子組件中使用this.$emit對(duì)父組件進(jìn)行傳值

在comp.vue中：

methods: {
	sendMsg() {
		//子傳父
		this.$emit('getMsg', "我是子,"+this.name);
	}
}

在index.vue中：

定義openMsg方法綁定給@getMsg

<comp :name="name" @getMsg="openMsg"></comp>

然后寫openMsg方法：打印傳過(guò)來(lái)的值

methods: {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->openMsg(msg) {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->console.log(msg)}}

結(jié)果如下：這樣子組件編寫的值傳到了父組件中打印了出來(lái)

父組件給父組件傳對(duì)象值

父給子傳值還是使用props方法，只是傳對(duì)象的話寫法有些區(qū)別

在父組件中：

<phoneItem v-for="(item,index) in songList" :item="item" :key="index"/>

現(xiàn)需要將song中songList的值傳過(guò)去

<script>
	import phoneItem from '../../components/phoneItem.vue'
	export default {
		components: {
			phoneItem
		},
		data() {
			return {
				title: 'Hello',
				name: 'parent',
				song: {
									img: 'http://gw.alicdn.com/bao/uploaded/i3/1917047079/O1CN01VlEDD522AEJzpw3A5_!!2-item_pic.png_360x10000.jpg',
									title: 'Apple/蘋果 iPhone 11 Pro',
									price: '8699.00',
									marketPrice: '￥8699.00',
								},
								songList: [
									{
										img: 'http://gw.alicdn.com/bao/uploaded/i3/1917047079/O1CN01VlEDD522AEJzpw3A5_!!2-item_pic.png_360x10000.jpg',
										title: 'Apple/蘋果 iPhone 11 Pro',
										price: '8699.00',
										marketPrice: '￥8699.00',
									},
									{
										img: 'http://gw.alicdn.com/bao/uploaded/i3/1917047079/O1CN01VlEDD522AEJzpw3A5_!!2-item_pic.png_360x10000.jpg',
										title: 'Apple/蘋果 iPhone 11 Pro',
										price: '8699.00',
										marketPrice: '￥8699.00',
									},
									{
										img: 'http://gw.alicdn.com/bao/uploaded/i3/1917047079/O1CN01VlEDD522AEJzpw3A5_!!2-item_pic.png_360x10000.jpg',
										title: 'Apple/蘋果 iPhone 11 Pro',
										price: '8699.00',
										marketPrice: '￥8699.00',
									},
								]
			}
		}
	}
</script>

子組件中進(jìn)行接收：

<template>
	<view class="phone">
		<image :src="item.img" mode="widthFix"></image>
		<view >
			{{item.title}}
		</view>
		<view class="">
			<view class="price">
				￥{{item.price}}
			</view>
			<view class="market-price">
				{{item.marketPrice}}
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		//父?jìng)鹘o子的參數(shù)
		props: {
			item: {
				type: Object,
				default() {
					return {}
				}
			}
		}
	}
</script>

運(yùn)行結(jié)果：

這樣就能把對(duì)象的值傳過(guò)來(lái)并且渲染：

關(guān)于“uniapp組件傳值的方法有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。