Vue子组件的created, mounted周期函数获取不了props中的值

date

Jun 28, 2022

slug

status

Published

背景

在给网站写一个编辑账户信息的页面时。遇到的情况是：页面需要先向后端发送请求获取原来的信息，然后将信息展示在input框内提供给用户重新修改。

问题

在输入组件里面获取父组件传入的props（用户信息）时，不能在setup函数（mounted、created生命钩子）对输入框进行赋值。

// 输入框组件（子组件）
setup (props, context) {
	//....
	// 与输入框的值绑定的对象
	const inputRef = reactive({
		// 父组件通过modelValue传值
		val: props.modelValue || '',
	})
}

此时在网页输出inputRef.val的值为’’。原因是inputRef初始化是在子组件created生命周期中，而父组件传入的modelValue需要向后端发送异步请求才能得到值，后者需要的时间比前者要长，所以导致inputRef.val被赋值’’。

解决方案

我们可以通过watch来侦听父组件传入的modelValue，当modelValue发生改变时及时对inputRef.value进行赋值。

// 输入框组件（子组件）
setup (props, context) {
	//....
	// 与输入框的值绑定的对象
	const inputRef = reactive({
		// 父组件通过modelValue传值
		val: props.modelValue || '',
	})

	watch(()=> props.modelValue, (value, preValue) => {
		//感叹号是ts的非空断言
		inputRef.value = value!
	})
}