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

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

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

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

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

  • 适合用 props的情况

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

  • 适合用 slot的情况

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

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

原文地址:https://www.cnblogs.com/WhiteHorseIsNotHorse/p/7495984.html