Comunicación y paso de parámetros de componentes uniapp.

Pasar valor del componente principal al componente secundario

El componente principal pasa el valor cuando se utiliza el componente secundario de prueba.

<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>

El subcomponente acepta el valor pasado desde el mundo exterior al componente a través de accesorios (el accesorio de uni es una matriz y el de vue es un objeto)

<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>

Pasar valor del componente secundario al componente principal

Los subcomponentes pasan parámetros a través de eventos desencadenantes $emit

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

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

El componente principal define eventos personalizados y recibe parámetros.

<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>

Paso de valor del componente Brother (suscripción y publicación de mensajes)

a.vue (lanzamiento)

       uni.$emitir

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

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

b.vue (suscríbete)

     dormir.$on

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

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