Vue3中父子传值及父子调用方法

Vue3中父子传值及父子调用方法

  最近使用Vue3来开发项目，相比Vue2之下，Vue3的语法感觉更加容易理解，且性能更高效；下面是本人在学习使用的过程中的一些记录。

  在开始之前，我们先看一下Vue3的语法结构，下面代码是我根据自己的理解添加的注释，与Vue2的语法差别还是比较大的，不过从注释中我们也更直观的理解了整个语法与Vue2之间的区别和联系。

<template>
 	<div ref='refFlag'>
 	{{data.value}}
    </div>
</template>

<script>
import { onMounted, reactive, ref } from '@vue/reactivity'
export default {
    name: 'Defalut.',
    components: {
        
    },
    props:[],
    setup() {
    	//定义ref,与vue2 this.$refs.xxx类似，不过这里是先定义一个ref,然后在上面为DOM对象绑定此ref
        let refFlag= ref(null);
        let defalueVal = ref(0);
        let showReportGeneration = ref(false);
        //reactive可以定义object类型数据，可以代替vue2的data,在下方也需要返回
        let data = reactive({
            arr: [1,2,3,4],
            value:'测试内容'
        })
		//onBeforeMount：DOM即将挂载
        //onMounted：DOM挂载完毕
        //onBeforeUpdate：DOM即将更新
        //onUpdated：DOM更新完毕
        //onBeforeUnmount：即将销毁
        //onUnmounted：销毁完毕
		onMounted(() => {
            //DOM挂载完毕执行
        })

        function setValue() {
          	defalueVal.value = 1;
        }
        //在template中如果要使用setup中的数据，这里就需要返回
        return {
            reportRef,
            setValue,
            data 
        }
    }
}

  有了上面的基础后，下面我们正式进入功能使用的过程；主要是传值与方法调用问题，那么下面就为大家进行一个讲解。

1、父给子组件传值

父组件内容

<template>
	<ChildModule :Val="data.val"></ChildModule>
</template>
<script>
import ChildModule from './ChildModule.vue'
import { reactive } from '@vue/reactivity'
export default {
    name: 'ParentModule',
    components: {
        ChildModule
    },
    setup() {
    	let data = reactive({
			val:"我是父窗口传的值"
		})
		return {
			data
		}
    }
}
</script>

子组件内容

<template>
</template>
<script>
export default {
    name: 'ChildModule',
    props: ['Val'],//定义props接收父窗口的传值
    setup(props) {
    	//输出父窗口的传值
    	console.log(props.Val);
    }
}
</script>

---

2、子给父组件传值

  子组件给父组件传值的时候，其实就是调用父组件中的定义的回调方法，所以子给父传值与子调用父功能函数的方法是相同的。

父组件内容

<template>
	<ChildModule @receiveChild="receiveChild_flag"></ChildModule>
</template>
<script>
import ChildModule from './ChildModule.vue'
export default {
    name: 'ParentModule',
    components: {
        ChildModule
    },
    setup() {
    	const receiveChild_flag = (e) => {
    		//输出接收到子组件传来的值，输出：“这是一条来自子组件的消息”
			console.log(e);
		}
		return {
			receiveChild_flag
		}
    }
}
</script>

子组件内容

<template>
	<Button @click="send"></Button>
</template>
<script>
export default {
    name: 'ChildModule',
    setup(props,context) {
        console.log(props, context);
        //点击按钮调用此方法
    	function send(){
    		//使用setup中第二个参数向父组件发出信息，调用父组件中子组件上定义的接收方法“receiveChild”
    		context.emit("receiveChild", "这是一条来自子组件的消息");
    	}
		return {
			send
		}
    }
}
</script>

3、父组件调用子组件方法

  在上面子组件给父组件传值的功能中我们可以了解到，子组件是通过调用父组件的方法进行的传值，所以子组件给父组件传值的同时也是在调用父组件的方法，那么父组件怎样调用子组件的方法呢？在vue2中我们可以通过this.$refs.xxx来进行调用，那么vue3中没有this.$refs.xxx的写法，且在setup中this指针是没有定义的，所以我们要怎样做呢？请看下面代码说明。

父组件内容

<template>
	<ChildModule  ref="cmRef"></ChildModule>
</template>
<script>
import ChildModule from './ChildModule.vue'
import { ref } from '@vue/reactivity'
export default {
    name: 'ParentModule',
    components: {
        ChildModule
    },
    setup() {
    	//定义子组件ref绑定子组件后就可以使用cmRef调用子组件中的内容了
    	let cmRef = ref(null);
    	cmRef.value.setVal("我是父组件，我调用了你");
		return {
			cmRef
		}
    }
}
</script>

子组件内容

<template>
</template>
<script>
export default {
    name: 'ChildModule',
    setup(props,context) {
        function setVal(val){
        	//输出父组件调用传过来的值，输出内容："我是父组件，我调用了你"
       		console.log(val);
        }
       
		return {
			setVal
		}
    }
}
</script>

到这里Vue3的传值也就说清楚了，感谢各位看官，如果觉得有用的话，也可以赞一下，您的鼓励是我分享的动力，谢谢各位！