vue中mixin和元件的差別是什麼

mixin和元件的區別：元件在引用後相當於在父元件內開闢了一塊單獨的空間，來根據父元件props過來的值進行對應的操作，單本質上兩者還是涇渭分明，相對獨立；而mixins在引入元件之後相當於父元件的各種屬性方法都被擴充了，會將元件內部的內容如data等方法、method等屬性與父元件對應內容合併。

本教學操作環境：windows7系統、vue3版，DELL G3電腦。

什麼是Mixin？

混音 (mixins) 是一種分發 Vue 元件中可用功能的非常靈活的方式。

混合物件可以包含任意元件選項。

當元件使用混合物件時，所有混合物件的選項將被混入該元件本身的選項。 【相關推薦：vuejs影片教學、web前端開發】

#mixin與元件的差異

• 組件在引用之後相當於在父組件內開闢了一塊單獨的空間，來根據父組件props過來的值進行相應的操作，單本質上兩者還是涇渭分明，相對獨立。
  而mixins則是在引入元件之後，則是將元件內部的內容如data等方法、method等屬性與父元件對應內容合併。相當於在引入後，父組件的各種屬性方法都被擴充了。

單純元件參考：

父元件子元件>>> 父元件子元件

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!')
            }
        }
    }

2、然後在需要此需求的vue頁面引入並且使用

<el-button>{{count}}</el-button>
 
import { elTableAdsorbent } from '@/utils/mixin/elTableAdsorbent'
 
export default {
  mixins: [elTableAdsorbent],
  data() {
    return {}
  },
  created(){},
  methods:{}, 
  watch:{}
}

3、同名鉤子函數將合併為一個數組，因此都會被呼叫。另外，混入物件的鉤子將在元件自身鉤子之前呼叫。

var mixin = {
  created: function () {
    console.log('混入对象的钩子被调用')
  }
}

new Vue({
  mixins: [mixin],
  created: function () {
    console.log('组件钩子被调用')
  }
})

// => "混入对象的钩子被调用"
// => "组件钩子被调用"

###4、兩個物件鍵名衝突時，取元件物件的鍵值對。 ###

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"

#########mixins的應用程式############

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) {
    // 逻辑...
  }
}

###（學習影片分享：###vuejs入門教學###、####程式設計基礎影片###）###

以上是vue中mixin和元件的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！