18.组件通信父子传参

我不是女神ヾ 2023-01-13 10:20 130阅读 0赞

**注意事项！！！：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>