Vue通用组件

一.数据从父组件传入
为了解耦，子组件本身就不能生成数据。即使生成了，也只能在组件内部运作，不能传递出去,下面是在一些较复杂的场景中，对props传递的参数加一些验证，也是方便如果是数据类型不符合可以直接抛出异常。

props: {
 tableData: {
   type: Array,
   required: true // 必传
 },
 titleName: String,
 needNum: [String, Number], // 两个类型都可以传
 isEdit: {
  type: Boolean,
  default: false // 默认false
 }
}

props传入参数，不建议对它进行操作，如果要操作，请先在子组件深拷贝。

二、在父组件处理事件
比如某些子组件的click事件，避免高耦合，逻辑最好放在父组件中，子组件只是一个承载体。

// 子组件 proflist
changeSort( sortObj ) {
  this.$emit('sortChange', sortObj )
}
// 父组件
<proflist @hanldSortChange='sortChange'></proflist>

三.slot的应用
现在有一个需求，在同一个子组件中，我在不同的场景需要用到不同的按钮，那么在封装组件的时候就不用去写按钮，只用在合适的未知留一个slot，把按钮的位置留出来，然后再父组件中写入：

// 子组件
<div class = 'public_btn'>
  <slot name = 'button'></slot>
</div>
// 父组件
<child>
  <button slot = 'button'>按钮1</button>
</child>

这样一个具名插槽灵活地解决了不同场景同一组件不同配置的问题。