18.组件通信 父子传参

注意事项！！！：1. 绑定属性 2. 自定义事件特别注意getNum后不加括号，所有这样自定义事件不加括号特别的一个记住！！！ ; 3. 点击事件@click=“getNum()” 这常添加 4. 还有一点特别重要就是等号后面一定要加 “” 字符串标志一定要添加上，不然报错或者不显示内容

1.父组件 index.vue

<template>
	<view class="content">
		<test :title="title" @myEven="getNum"></test>
		这是子组件传递过来的数据{
   
   {num}}
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				num:0,
			}
		},
		methods:{
			getNum(num){ // 子组件传过来的参数num打印看一下是否能拿到
				console.log(num);
				// 第一个num本组件上面num:0		第二个num	test组件传递过来的num相等	然后再template组件{
   
   {num}}	显示出来页面
				this.num = num;
			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

2.子组件：test.vue

<template>
	<view id="myView" >
	我是test组件{
   
   {num}}
	这是父组件传递过来的数据{
   
   {title}}
	
	<!-- 子传父：触发一个事件来传给父组件 -->
	<button @click="sendNum">给父组件传值</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num:3,
			}
		},
		props:['title'],
		methods:{
			sendNum(){
				console.log('给父组件传值');
				// 把属性里面的值传给子组件		第一个自定事件名父组件的	第二个参数上面的要传的属性值
				this.$emit('myEven',this.num)
			},
		}
		
	}
</script>
<style>
</style>