Vue之mixin混入詳解

更新時間：2021年11月21日 11:33:56 作者：王同學要努力

這篇文章主要為大家介紹了Vue之mixin混入，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

局部混入

<template>
  <div>
    <h2 @click="showName">學生姓名：{{name}}</h2>
    <h2>學生性別：{{sex}}</h2>
  </div>
</template>

<script>
  //引入一個混合
  import {
    hunhe,hunhe2
  } from '../mixin'
  export default {
    name: 'Student',
    data() {
      return {
        name: '張三',
        sex: '男'
      }
    },
    mixins: [hunhe,hunhe2]
  }

</script>

export const hunhe = {
    methods: {
        showName() {
            alert(this.name)
        }
    }
}

export const hunhe2 = {
    data() {
        return {
            x: 100,
            y: 200
        }
    }

}

全局混入

import { hunhe, hunhe2 } from './mixin'
Vue.mixin(hunhe)
Vue.mixin(hunhe2)

在這里插入圖片描述

總結

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容!

您可能感興趣的文章:

vue 實現(xiàn)上傳組件
雖然前端UI框架大都提供文件上傳的組件，以及很多插件可供選擇，工作中可能不需要我們手寫一個上傳組件，但是從零封裝組件對學習是很有助益的。下文為大家介紹使用Vue3+TypeScript實現(xiàn)的一個文件上傳的功能，目前只實現(xiàn)上傳等基本功能，后續(xù)會逐漸對功能進行擴展
2021-05-05
警告[vue-router]?Duplicate?named?routes?definition簡單解決方法
這篇文章主要關于介紹了警告[vue-router]?Duplicate?named?routes?definition的解決方法,這個錯誤提示是因為在Vue Router中定義了重復的路由名稱,需要的朋友可以參考下
2023-12-12
vue插值表達式和v-text指令的區(qū)別
這篇文章主要介紹了vue插值表達式和v-text指令的區(qū)別，{{}}這種語法叫做插值表達式，在插值表達式中可以寫任何合法的js表達式，下面來看看文章是怎么介紹該內容的吧,需要的朋友可以參考一下
2021-11-11
Vue實現(xiàn)頁面返回停留原位置的多種方案
文章主要討論了在 Vue 開發(fā)中實現(xiàn)頁面返回停留原位置的多種方案,包括 Vuex、keep-alive、v-show、客戶端跳轉等,并分別闡述了它們的優(yōu)缺點和適用情況,強調開發(fā)前應周全考慮前端業(yè)務和用戶體驗,根據(jù)實際業(yè)務選擇合適方案,需要的朋友可以參考下
2025-03-03
Vue3中的defineExpose函數(shù)用法深入解析
這篇文章主要介紹了Vue3中的defineExpose函數(shù)用法的相關資料,defineExpose是Vue3中用于在模式下暴露組件內部屬性和方法的輔助函數(shù),它允許父組件通過ref訪問子組件的暴露內容,提高組件間的交互能力并保持封裝性,需要的朋友可以參考下
2025-01-01
Vue綁定class和綁定內聯(lián)樣式的實現(xiàn)方法
本文主要介紹了Vue綁定class和綁定內聯(lián)樣式的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-11-11
用vue構建多頁面應用的示例代碼
這篇文章主要介紹了用vue構建多頁面應用的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
vue DatePicker日期選擇器時差8小時問題
這篇文章主要介紹了vue DatePicker日期選擇器時差8小時問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05
elementUI table如何給表頭添加氣泡顯示
這篇文章主要介紹了elementUI table如何給表頭添加氣泡顯示問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-11-11
vue 指定組件緩存實例詳解
keep-alive 是 Vue 內置的一個組件，可以使被包含的組件保留狀態(tài)，或避免重新渲染。這篇文章主要介紹了vue 指定組件緩存,需要的朋友可以參考下
2018-04-04