mixin和元件的區別：元件在引用後相當於在父元件內開闢了一塊單獨的空間，來根據父元件props過來的值進行對應的操作，單本質上兩者還是涇渭分明，相對獨立；而mixins在引入元件之後相當於父元件的各種屬性方法都被擴充了，會將元件內部的內容如data等方法、method等屬性與父元件對應內容合併。
本教學操作環境：windows7系統、vue3版，DELL G3電腦。
什麼是Mixin？
混音 (mixins) 是一種分發 Vue 元件中可用功能的非常靈活的方式。
混合物件可以包含任意元件選項。
當元件使用混合物件時，所有混合物件的選項將被混入該元件本身的選項。 【相關推薦：vuejs影片教學、web前端開發】
#mixin與元件的差異
父元件子元件>>> 父元件子元件
mixins： 父元件子元件>>> new父元件#有點像註冊了一個vue的公共方法，可以綁定在多個組件或多個Vue物件實例中使用。另一點，類似於在原型物件中註冊方法，實例物件即組件或Vue實例物件中，仍然可以定義相同函數名的方法進行覆蓋，有點像子類別和父類別的感覺。
mixins和vuex區別
Mixins：可以定義共用的變量，在每個元件中使用，引入元件中之後，各個變量是相互獨立的，值的修改在組件中不會相互影響。如果相同對象，元件會覆寫mixins
vuex：用來做狀態管理的，裡面定義的變數在每個元件中都可以使用和修改，在任一元件中修改此變數的值之後，其他組件中此變數的值也會隨之修改。
mixins的使用
1、先建立一個js文件，例如elTableAdsorbent.js
export const elTableAdsorbent = {
data() {
return {
count:10
}
},
methods: {
// 显示页面中所有内容
handleCount() {
this.count++
}
}或// 定义一个混入对象
var myMixin = {
data(){
return{
parent: 405
}
},
mounted: function () {
this.hello()
},
methods: {
hello: function () {
console.log(this.parent, 'hello from mixin!')
}
}
}<el-button type="primary" @click="handleCount">{{count}}</el-button>
import { elTableAdsorbent } from '@/utils/mixin/elTableAdsorbent'
export default {
mixins: [elTableAdsorbent],
data() {
return {}
},
created(){},
methods:{},
watch:{}
}
var mixin = {
created: function () {
console.log('混入对象的钩子被调用')
}
}
new Vue({
mixins: [mixin],
created: function () {
console.log('组件钩子被调用')
}
})
// => "混入对象的钩子被调用"
// => "组件钩子被调用"var mixin = {
methods: {
conflicting: function () {
console.log('from mixin')
}
}
}
var vm = new Vue({
mixins: [mixin],
methods: {
conflicting: function () {
console.log('from self')
}
}
})
vm.conflicting() // => "from self"var install = function (Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
// 3. 注入组件
Vue.mixin({
created: function () {
// 逻辑...
}
...
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (options) {
// 逻辑...
}
}以上是vue中mixin和元件的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
