vue中组件的父子通信

1.父传子

创建一个子组件

在项目中创建一个components目录，底下创建一个Son.vue文件，通常为了区分组件和页面组件首字母大写。

创建一个页面作为父组件

在这个页面中导入并且注册组件，，并且定义一个变量传给子组件

 子组件中接受传过来的变量

用props接收，有两种写法。typeof表示传入的数据类型，default表示初始值

2.子传父

子组件中定义一个方法：用this.$emit('名字'，值)传给父组件

<button @click="setNumber">子传父</button>



<script>
eport default{
    data() {
			return {
				number: 2
			}
		},
	methods: {
			setNumber() {
				//子传父
				this.$emit('setNumber',this.number)
			}
		},
}
</script>

 父组件接受这个方法并调用。

<template>
	<view class="">
		<Son :num="num"  @setNumber="getNumber"></Son>
		
	</view>
	
</template>

<script>
	import Son from "../../components/Son.vue"
	
	export default {
		components: {
			Son
		},
		data() {
			return {
				num:1
			}
		},
		methods: {
			getNumber(number) {
				console.log('父组件接受到了',number);
			}
		}
	}
</script>