当前位置: 首页 > Web前端 > HTML5

模型组件的优雅封装

时间:2023-04-05 17:23:44 HTML5

业务场景当我们要封装ui组件库的模态组件时,我们最初的想法是父组件传递一个布尔值(isShow)给子组件,子组件显示和根据这个值隐藏;但是组件v-model绑定的数据是双向绑定的,也就是说这个数据必须可以设置数据,但是vue中的props是单向数据流,不能给父组件设置数据(会造成数据流混乱)。我以前是通过在自身组件中定义方法,然后父组件直接调用$ref.xxx改变子组件的数据,从而达到显示和隐藏的目的。以下是代码:>关闭

但是这种直接调用子组件的方法不是很优雅。Vue推荐使用props将父组件的数据向下传递,所以有如下写法:代码实现//父组件调用其实通过set将数据传回父组件非常简单。需要注意的是父组件绑定isMyModalShow时需要加上sync修饰符。以上代码均使用ts实现