Kommunikation und Parameterübergabe von Uniapp-Komponenten

Übergeben Sie den Wert von der übergeordneten Komponente an die untergeordnete Komponente

Die übergeordnete Komponente übergibt den Wert, wenn die untergeordnete Testkomponente verwendet wird

<template>
	<view>
		<test v-if="flag" :title="title"></test>
		<test :msg="msg" @myEvent="getMsg"></test>  // 第二步  加：
	</view>
</template>

<script>
	import test from "@/components/test/test.vue"
	export default {
		data () {
			return {
				flag: true,
				title: "title",
				msg: 'msg'                          // 第一步 写data
			}
		},
		
		components: {test}
	}
</script>

Die Unterkomponente akzeptiert den Wert, der von der Außenwelt über Requisiten an die Komponente übergeben wird (Unis Prop ist ein Array und Vues ist ein Objekt).

<template>
	<view>
	这是传过来的数据{
   
   {title}}
	<button type="primary">给父组件传值</button>  
	{
   
   {msg}}                                            //第二步   插值展示
	</view>
</template>

<script>
	export default {
		props: {                                       //第一步  props接收
					msg: {
						type: String,
						value: ''
					},
					title: {
						type: String,
						value: ''
					},
				},           
	}
</script>

<style>
</style>

Wertübergabe von der untergeordneten Komponente an die übergeordnete Komponente

Unterkomponenten übergeben Parameter über $emit-Triggerereignisse

<template>
	<view>
		<button type="primary" @click="sendMsg">给父组件传值</button>  //第一步
	</view>
</template>

<script>
	export default {
		data () {
			return {
				status: '打篮球'
			}
		},
		methods: {
			sendMsg () {
				this.$emit('myEvent',this.status)       //第二步
			}
		}
	}
</script>

Die übergeordnete Komponente definiert benutzerdefinierte Ereignisse und empfängt Parameter

<template>
	<view>
		<test :msg="msg" @myEvent="getMsg"></test>   //第一步
	</view>
</template>
<script>
	import test from "@/components/test/test.vue"
	export default {
		data () {
			return {
				msg: 'hello'
			}
		},
		methods: {
			getMsg (res) {                          //第二步
				console.log(res)
			}
		},
		
		components: {test}
	}
</script>

Wertübergabe der Brother-Komponente (Abonnement und Veröffentlichung von Nachrichten)

a.vue(Veröffentlichung)

       uni.$emit

<template>
	<view>
		<button @click="addnum">修改b组建数据</button>
		</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		methods:{
			addnum(){
				uni.$emit('updataNum',10)   //发布
			}
		}
	}
</script>

b.vue (abonnieren)

     schlafen.$on

<template>
	<view>{
   
   {num}}</view>
</template>

<script>
	export default{
		data(){
			return{
				num:0
			}
		},
		created() {
			uni.$on('updataNum',num=>{   //订阅
				this.num+=num 
			})
		}
	}
</script>