封装组件的注意事项

数据从父组件传入

props属性中添加验证规则:

props: {
  length: {
    type: [String],
    default: 3
  }
}

通过props传入的参数不建议对其进行操作,会同时修改父组件中的数据。
直接赋值不能解除双向绑定

let data = JSON.parse(JSON.stringify(this.data))

父组件中处理事件

处理事件的方法尽量写在父组件中,以保证通用组件中的数据不被污染。

不要依赖vuex传参

尽量使用props和自定义事件,因为当页面刷新时vuex会重新初始化,丢失已编辑的数据

留一个slot

image.png

你可能感兴趣的:(封装组件的注意事项)