腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動(dòng)下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語(yǔ)言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線(xiàn)工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫(kù)

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國(guó)CMS WordPress

常用工具

PHP開(kāi)發(fā)工具 python Photoshop 必備軟件

Vue組件公用方法提取mixin實(shí)現(xiàn)

更新時(shí)間：2022年03月29日 11:41:38 作者：什么都干的派森

這篇文章主要介紹了Vue組件公用方法提取mixin實(shí)現(xiàn)，多個(gè)組件共用一個(gè)方法時(shí)可以用?mixin?抽取到一個(gè)js文件中，作為共用方法，下面一起進(jìn)入文章了解更多詳細(xì)內(nèi)容吧

一.應(yīng)用場(chǎng)景

多個(gè)組件共用一個(gè)方法時(shí)可以用 mixin 抽取到一個(gè)js文件中，作為共用方法

二.實(shí)現(xiàn)方法

1.提取js共用方法文件

export const common = {
?? ?
?? ?// 組件共用屬性 ----------------------------------
?? ?data() {
?? ??? ?return {
?? ??? ??? ?age: 18?? ??? ??? ? ? ? ? ?// 設(shè)置一個(gè)共用屬性
?? ??? ?}
?? ?},
?? ?// ---------------------------------------------
?? ?
?? ?// 組件共用方法 ---------------------------------------------
?? ?methods: {
?? ??? ?showName() {
?? ??? ??? ?alert(this.name) ??? ??? ?// 彈出組件中name屬性的共用方法
?? ??? ?}
?? ?},
?? ?// --------------------------------------------------------
?? ?
?? ?// 組件掛載時(shí)的共用方法 ----------------------
?? ?mounted() {
?? ??? ?console.log('初始化方法') ? ?// 掛載時(shí)調(diào)用
?? ?},
?? ?// ----------------------------------------
?? ?
}

2.引入

<template>
?? ?<div>
?? ??? ?<div>組件</div>
?? ??? ?<button @click="showName">彈出姓名</button>
?? ?</div>
</template>

<script>

?? ?// 引入js文件中的方法對(duì)象 --------------------
?? ?import {common, } from '../pub_js/common.js'
?? ?// ----------------------------------------
?? ?
?? ?export default {
?? ??? ?name: 'Student',
?? ??? ?data() {
?? ??? ??? ?return {
?? ??? ??? ??? ?name: '張三'
?? ??? ??? ?}
?? ??? ?},
?? ??? ?
?? ??? ?// 調(diào)用 mixin 將組件js與共用js合并 ---
?? ??? ?mixins: [common, ],
?? ??? ?// --------------------------------
?? ??? ?
?? ?}
</script>

三.注意事項(xiàng)

1.data中的屬性合并后，如果有命名沖突的情況，以組件中的屬性為主，【組件屬性覆蓋共用js中的屬性】
2.methods中的方法合并后，如果有命名沖突的情況，以組件中的方法為主，【組件方法覆蓋共用js中的方法】
3.mounted等生命周期方法合并后，會(huì)先調(diào)用共用js中的的生命周期函數(shù)，再調(diào)用組件中的生命周期函數(shù)，【不會(huì)進(jìn)行覆蓋】
4.如果是全局共用的方法，可以直掛載到main.js中↓

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 掛載全局共用方法 -----------------------
import {common, } from 'pub_js/common.js'
Vue.mixin(common)
// --------------------------------------

new Vue({
? render: h => h(App),
}).$mount('#app')

到此這篇關(guān)于Vue組件公用方法提取mixin實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue組件提取內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: