验证码: 看不清楚,换一张 查询 注册会员,免验证
  • {{ basic.site_slogan }}
  • 打开微信扫一扫,
    您还可以在这里找到我们哟

    关注我们

Vue3中怎么修改父组件传递到子组件中的值

阅读:735 来源:乙速云 作者:代码code

Vue3中怎么修改父组件传递到子组件中的值

自定义组件上使用v-model

父组件:

//此处是父组件中引入的子组件


//定义数据
let num=ref(10);//定义num为10,传递给子组件

子组件:


	//子组件接收父组件传递过来的数据
	let props=defineProps({
		num:number;
	});
	console.log(props.num)//接收过来的数据num=10

	//重点:开始修改子组件传递过来的num
	//1.引入我们的 **emit("自定义事件名",传递的数据)** 函数,用来触发自定义事件
	//2.使用emit()
	let emit=defineEmits(["update:num"]);//自定义的更新num事件
	//3.假设子组件里的有个按钮,执行的是这个changeNum事件
	let changeNum=()=>{
		emit("update:num",100);//触发自定义事件,将父组件的num修改为100
	}
	

注意:
1.大家肯定有疑惑,这个emit()不就是子传父的时候用的吗,那么父组件上不应该去绑定这个update:num吗?
如下:父组件:
是的,确实是子传父用的,但是你没必要再去绑定@update:num了。
why?
因为尤大大在自定义组件上使用v-model自己已经做过了处理,所以你只需要emit(“定义update:值”,数据)即可修改父组件的值了

分享到:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: hlamps#outlook.com (#换成@)。
相关文章
{{ v.title }}
{{ v.description||(cleanHtml(v.content)).substr(0,100)+'···' }}
你可能感兴趣
推荐阅读 更多>