组件通信 小程序

组件通信：

父传子：

父组件。只需要 在子组件标签上 绑定一个变量把要发送的数据赋给它

<template>
	<view class="content">
		<view class="text-area">
			<Zua :value="msga"></Zua>
		</view>
	</view>
</template>

<script>
	import Zua from "../../components/zua/zua.vue"
	export default {
		data() {
			return {
				msga: 'Helloo'
			}
		},
		components:{
			Zua
		},
		methods: {

		}
	}
</script>

子组件。使用props接受 父组件定义的变量名（建议使用完整写法）

<template>
	<view class="">
		{{value}}
	</view>
</template>

<script>
	export default{
		props:{
			value:{
				type:String,
				default:'Hello'
			}
		},
		data(){
			return{
				
			}
		}
	}
</script>

子传父

父组件。需要在子组件标签上 @自定义事件=“父组件的事件”（注意这里的自定义事件是在子组件里定义的）

<template>
	<view class="content">
		<view class="text-area">
			<Zua @receive="receiveF"></Zua>
			{{msgb}}
		</view>
	</view>
</template>

<script>
	import Zua from "../../components/zua/zua.vue"
	export default {
		data() {
			return {
				msgb:''
			}
		},
		components:{
			Zua
		},
		methods: {
			receiveF(e){
				this.msgb=e;
				console.log(e);
			}
		}
	}
</script>

子组件。需要通过事件 然后在事件里写this.$emit(“自定义事件”，要传的值)

<template>
	<view class="">
		<button @click="send">点击子组件传父组件</button>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				message:'我是子组件的数据'
			}
		},
		methods:{
			send(){
				this.$emit("receive",this.message)
			}
		}
	}
</script>

组件与组件（这里是a发给b数据）

父组件。也就是说组件与组件通信 需要父组件中介，a发给父组件($emit)，父组件传给b(props)。

<template>
	<view class="content">
		<view class="text-area">
			<Zua @receive="receiveF"></Zua>
			{{msgb}}
			<Zub :zub="msgb"></Zub>
		</view>
	</view>
</template>

<script>
	import Zua from "../../components/zua/zua.vue"
	import Zub from "../../components/zub/zub.vue"
	export default {
		data() {
			return {
				msgb:''
			}
		},
		components:{
			Zua,
			Zub
		},
		methods: {
			receiveF(e){
				this.msgb=e;
				console.log(e);
			}
		}
	}
</script>

a组件。

<template>
	<view class="">
		<button @click="send">点击子组件传父组件</button>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				message:'我是子组件a的数据'
			}
		},
		methods:{
			send(){
				this.$emit("receive",this.message)
			}
		}
	}
</script>

b组件。

<template>
	<view class="" style="border: 1px solid red;">
		{{zub}}
	</view>
</template>

<script>
	export default{
		props:{
			zub:{
				type:String,
				default:''
			}
		},
		data(){
			return{
				
			}
		}
	}
</script>

v-model实现组件通信

父组件。

<template>
	<view class="content">
		<view class="vzu">
			<Vzu @inputtt="inpsF" />
			{{inpt}}
		</view>
	</view>
</template>

<script>
	import Vzu from "../../components/vzu/vzu.vue"
	export default {
		data() {
			return {
				inpt: ''
			}
		},
		components: {
			Vzu
		},
		methods: {
			inpsF(e){
				this.inpt=e;
			}
		},
	}
</script>

子组件。

<template>
	<view class="content" style="border:1px solid red;">
		<input v-model="inp" @input="inps" class="uni-input" placeholder="输入" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inp: ''
			}
		},
		methods: {
			inps() {
				this.$emit("inputtt", this.inp);
			}
		}
	}
</script>

子组件通过v-model和@input实现数据实时更新，把这个更新的数据发送给父组件，所以父组件显示的也是更新着的数据。