Vue 之 混入

1、混入

• 混入 (mixin) 是作用是分发 Vue 组件中可复用的功能；
• 一个混入对象可以包含任意组件选项；
• 当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

2、全局混入

• 混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。

3、混入和普通组件

1、普通组件引用

• 父组件 + 子组件 >>> 父组件 + 子组件;
• 组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。

2、 混入组件引用

• 父组件 + 子组件 >>> new父组件;
• 混入是在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了;
• 当 data、method中的方法和属性重复时，混入中的会被覆盖;
• 在使用混入时，父组件和子组件同时拥有着子组件内的各种属性方法，但这并不意味着他们同时共享、同时处理这些变量，两者之间除了合并，是不会进行任何通信的。

// tableMixin.js
export default {
  data() {
    return {
      readonly: false,
      title: null,
      selectData: '',
      checked: false,
      addDialog: false,
      page: {
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      row: null,
      tableHeight: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.windowResize()
    })
    window.onresize = () => this.windowResize()
  },
  methods: {
    // 监听窗口变化
    windowResize() {
      if (document.querySelector('.table-search') && document.querySelector('.fenye')) {
        const table_search = document.querySelector('.table-search').offsetHeight
        const fenye = document.querySelector('.fenye').offsetHeight
        this.tableHeight = `calc(100% - ${table_search + fenye}px)`
      }
    },
    // 当选择项发生变化时会触发
    handleSelectionChange(val) {
      this.selectData = val
      if (this.selectData.length === this.tableData.length) {
        this.checked = true
      } else {
        this.checked = false
      }
    },
    // 全选
    toggleSelection(checked) {
      this.$refs.multipleTable.toggleAllSelection(checked)
    },
    search() {
      this.page.pageNum = 1
      this.list()
    },
    add() {
      this.title = '新增'
      this.addDialog = true
    },
    handleClickInfo(row) {
      this.title = '查看'
      this.row = row
      this.readonly = true
      this.addDialog = true
    },
    handleClickModify(row) {
      this.title = '修改'
      this.row = row
      this.addDialog = true
    },
    cancel() {
      this.handleClose()
    },
    submit() {
      this.handleClose()
      this.list()
    },
    handleClose() {
      this.addDialog = false
      this.row = null
      this.readonly = false
    },
    // 删除
    del() {
      if (this.selectData.length === 0) {
        this.$message({
          message: '请先选择'
        })
        return
      }
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var num = []
        this.selectData.forEach((item, index) => {
          num.push(item.id)
        })
        this._delt(num)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    // 启用
    Enable() {
      if (this.selectData.length === 0) {
        this.$message({
          message: '请先选择'
        })
        return
      }
      this.$confirm('此操作即将启动, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var num = []
        this.selectData.forEach((item, index) => {
          num.push(item.id)
        })
        this._enable(num)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    // 禁用
    Disable() {
      if (this.selectData.length === 0) {
        this.$message({
          message: '请先选择'
        })
        return
      }
      this.$confirm('此操作即将启动, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var num = []
        this.selectData.forEach((item, index) => {
          num.push(item.id)
        })
        this._disable(num)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    }
  }
}

// index.vue
<script>
import { list, delt } from '@/api/device'
import tableMixin from '@/mixins/tableMixin'

export default {
  mixins: [tableMixin],
  data() {
    return {
    }
  },
  methods: {
    // 删除
    _delt(listId) {
      delt(listId).then(response => {
        this.$message({
          message: response.msg,
          type: 'success'
        })
        this._list()  // 刷新列表
      })
    }
  }
}
</script>