欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

写 vue 组件 自定义数据的 两种方式对比

程序员文章站 2022-03-29 19:31:51
...

我们写一个业务当代码较多时 想将其中可抽取的部分 抽取成单独组件,

那么这个组件的内容最好不要写死,最好由父组件传递数据过去 这样这个子组件才可以以后达到复用的效果

如 确认弹窗,右键菜单,等, 确认弹窗的标题 确认 取消 按钮 最好都不要写死,右键菜单的条目 也由外界传入
传入数据的方式 为两种   **props** **slot**

那么问题来了 什么情况适合用哪种呢

  • 适合用 props的情况

    适合子类的条目数量动态可变时,比如右键菜单,有时候 可能弹出【复制】,可能弹出【暂停,继续】,,可能弹出【置顶,取消置顶,退出】。。等
    此时用 props传递数据数组过去 子组件遍历生成

  • 适合用 slot的情况

    显然 反着说就好了,子组件就两个条目,要么是【确认,取消】,要么是【ok,拒绝】,,要么是【好的知道了,朕不同意】等等,只是数据的不同,我们只要在父组件改变数据 通过slot传递即可

  • 补充,当然 本文只是个人的一种建议,其实两种方式都可以互换的,并非强制需求,如果您有其他想法 欢迎留言讨论~~