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

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

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

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

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

• 适合用 props的情况

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

• 适合用 slot的情况

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

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