周所周知vue的props是单向数据流,可以从父组件中改变传往子组件的props,反之则不行,所以在vue2时,用.sync修饰符搭配配合$emit可以实现子组件改变props,如下
//父组件中
<Toast
:show.sync="shows"
clickPropus
title="标题"
okValue="取消"
closeValue='确定'
info="内容,内容内容内容内容内容内容内容内容内容内容内容内容"
></Toast>
//子组件中
this.$emit("update:show", false);
这样我们就可以实现子组件改变props但是在vue3中取消了.sync的修饰符,如图
官网也解释说明了,不再支持.sync ,这时候我们不用.sync修饰符 使用@update:show="shows =
e
v
e
n
t
"
添
加
到
t
o
a
s
t
组
件
上
,
这
时
候
就
可
以
使
用
event"添加到toast组件上,这时候 就可以使用
event"添加到toast组件上,这时候就可以使用emit来改变props的值了
<Toast
:show="shows"
@update:show="shows = $event"
clickPropus
title="标题"
okValue="取消"
closeValue='确定'
info="内容,内容内容内容内容内容内容内容内容内容内容内容内容"
></Toast>