关于vue.js:Vuemixins

简略介绍

• 能够把多个组件共有的数据，办法，提取成一个混合文件
• data 中数据本人和混合文件都有时，以本人的数据为主
• 生命周期还有办法这些都是独立的

全局混合

// 这样引入所有的页面，组件都会应用这个混合
import mixin from './components/mixin/mixin'
 
Vue.mixin(mixin)

部分混合

// 罕用援用形式
// mixin.js
 
export default {data() {
        return {
            mixData: '这是 mixin 中数据',
            x: 100,
        }
    },
    created () {console.log(this.y)
    },
    methods: {handleClick() {console.log(this.name)
        }
    },
    computed: {showNumber() {return this.x + this.y}
    }
}
 
 
// 两个须要援用混合的组件
 
// Student.vue
<template>
    <div>
      <h1>{{msg}}</h1>
      <div @click="handleClick"> 姓名：{{name}}</div>
      <div> 年龄：{{age}}</div>
      <div> 数字：{{showNumber}}</div>
    </div>
</template>
<script>
 
import mixin from './mixin/mixin'
 
export default {
  name: 'Student',
  data () {
    return {
      msg: 'Welcome',
      y: 100
    }
  },
  mixins: [mixin],
  props: {
    name: {
      type: String,
      requried: true
    },
    age: {
      type: Number,
      default: 18
    }
  },
  created () {console.log(this.mixData)
  }
}
</script>
 
 
// School.vue
<template>
    <div>
      <h1>{{msg}}</h1>
      <div @click="handleClick"> 姓名：{{name}}</div>
      <div> 地址：{{address}}</div>
      <div> 数字：{{showNumber}}</div>
    </div>
</template>
<script>
 
import mixin from './mixin/mixin'
 
export default {
  name: 'Student',
  data () {
    return {
      msg: 'Welcome',
      y: 200
    }
  },
  mixins: [mixin],
  props: {
    name: {
      type: String,
      requried: true
    },
    address: {
      type: String,
      requried: true
    }
  },
  created () {console.log(this.mixData)
  }
}
</script>