vue-通用组件封装

通用组件要具备高性能、低耦合，开发中应注意以下几点

数据的传入

数据从父组件传入时应在props中加一些限制或验证

props: {
  data: {
     type: Array,
     required: true
  },
 sometype: {
     type: Boolean,
     default: false
  },
  someFlag: [String, Number]
}

props中的数据不能直接进行修改，如果要引用可进行深拷贝直接复制不能接触双向绑定

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

父组件中处理事件通用组件中的事件处理应尽量放到父组件中通用组件本身只作为中转，避免数据污染，保证更换的通用性
```
// 子组件
sumbmit (data) {
  this.$.emit('submit', data)    // 此处直接传回父组件
}
```
*只在组件内部使用的数据可以处理 3.最好留一个solt 为了让通用组件能适用场景应尽量留一个solt以便进行个性化配置例如下图中的按钮部分，可在一个适当的位置留一个solt，具体需要什么按钮可以由父组件决定
*只要不是独立性很强的组件都可以留一个solt
不要过分一栏Vuex 非父子组件通常会采用Vuex传参，但是Vuex的设计初衷是用来管理组件状态的，虽然也可以用来传参，但并不推荐 因为Vuex类似一个全局变量，会一直占用内存，在写入数据庞大的state的时候，会产生内存泄漏
合理运用scoped编写css 在编写组件的时候，可以在style标签中添加scoped,让标签中的样式只对当前组件生效，但是一味的使用scoped，肯定会产生大量的重复代码，所以在开发的时候，应避免在组件中写样式，当全局样式写好后，再针对每个组件，通过scoped属性添加组件样式
solt 作用域试用（不算注意事项吧）具名插槽

<div>
    <header>
        <slot name="header"> </slot>
    </header>
    <main>
        <slot></slot>
    </main>
</div>

当有多个slot的时候使用name属性就行区分使用v-slot指令进行指定：

<组件>
    <template v-slot:header>...</template>
    <p>其他不在template中的或者未指定的将渲染再默认slot中</p>
</组件>

作用域插槽：解决父组件向插槽内传值

<span>
    <slot v-bind : user = "user">
        {{ user.latName }}
    </slot>
</span>

使用: slotProps为自定义名字

<current-user>
    <template v-slot : default = "slotProps">
        {{ slotProps.user.firstName }}
    </template>
</current-user>

如果只有一个默认插槽可以简写，但如果有多个，必须逐个指明

<current-user v-slot="slotProps">
</current-user>

Vue-通用组件封装注意事项

vue-通用组件封装