欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

關(guān)于vue混入(mixin)的解讀

 更新時間:2022年10月18日 08:35:14   作者:小鐵匠95  
這篇文章主要介紹了關(guān)于vue混入(mixin)的解讀,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

vue混入(mixin)的解讀

混入(mixin)提供了一種非常靈活的方式,來分發(fā)vue組件中的可復(fù)用功能。一個混入對象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對象時,所有混入對象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)。

1.鉤子函數(shù)

混入對象的鉤子將在組件自身鉤子之前調(diào)用。

?// ?minxin.js
const mixin = {
? data() {
? ? return{
? ? ? msg1: '我是混入內(nèi)容1',
? ? ? msg2: '我是混入內(nèi)容2'
? ? }
? },
? created() {
? ? console.log(this.msg3)
? }
}
export default mixin;
</script>
...
// 頁面組件
<template>
? <div class="header">
? ? <h1></h1>
? </div>
</template>
<script>
import mixin from './mixins/mixin'
export default {
? mixins: [mixin],
? name: 'Header',
? data(){
? ? return{
? ? ? msg1: '我是組件內(nèi)容1',
? ? ? msg3: '我是組件內(nèi)容2'
? ? }
? },
? created() {
? ? ? console.log(this.msg2)
? ? ? console.log(this.msg1)
? },
}
</script>
??
?? ?// 我是組件內(nèi)容2
?? ?// 我是混入內(nèi)容2
?? ?// 我是組件內(nèi)容1

2.普通方法合并

當(dāng)混合值為對象的選項(xiàng)時,例如 methods、components、directive,將被混合為同一個對象,兩個對象鍵名沖突時,取組件對象的鍵值對。

<body>
? ? <div id="app"></div>
</body>
<script src="./vue.js"></script>
<script>
? ? var Mixins = {
? ? ? ? methods: {
? ? ? ? ? ? mixin: function() {
? ? ? ? ? ? ? ? console.log('MixinOne')
? ? ? ? ? ? },
? ? ? ? ? ? mixinTwo: function () {
? ? ? ? ? ? ? ? console.log('MixinTwo')
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? new Vue({
? ? ? ? el: '#app',
? ? ? ? mixins: [Mixins],
? ? ? ? methods: {
? ? ? ? ? ? mixin: function () {
? ? ? ? ? ? ? ? console.log('component')
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? mounted() {
? ? ? ? ? ? this.mixin()
? ? ? ? ? ? this.mixinTwo()
? ? ? ? }
? ? })
? ??
?? ?// component
?? ?// MixinTwo
</script>

3.局部混入

在componnets目錄下新建mixins文件夾,并在mixins目錄下創(chuàng)建一個mixin.js文件,代碼如下:

const mixin = {
? data() {
? ? return {
? ? ? msg: "hello"
? ? }
? },
? methods: {
? ? mixinMethod() {
? ? ? console.log(this.msg + ',這是mixin混入方法')
? ? }
? }
}
export default mixin;

在需要的頁面中引入:

<template>
?? ?<div>{{msg}}</div>
</template>
<script>
import mixin from '../mixins/mixin'
export default {
?? ?mixins: [mixin],
? ? data() {
?? ? ? ?return {
?? ? ? ?}
? ? }
?? ?mounted() {
?? ??? ?this.mixinMethod()
?? ?}
}
// hello,這是mixin混入的方法

4.全局混入

在main.js加入以下代碼

Vue.mixin({
? data() {
? ? return {
? ? ? msg: 'hello'
? ? }
? },
? methods: {
? ? mixinMethod() {
? ? ? console.log(this.msg+',這是mixin混入的方法')
? ? }
? }
})

在組件中直接引用:

<template>
?? ?<div>{{msg}}</div>
</template>
<script>
export default {
? ? data() {
?? ? ? ?return {
?? ? ? ?}
? ? }
?? ?mounted() {
?? ??? ?this.mixinMethod()
?? ?}
}
// hello,這是mixin混入的方法
</script>

vue中mixin混入注意事項(xiàng)

1.頁面和mixin的created都會執(zhí)行,先執(zhí)行mixin的,再執(zhí)行當(dāng)前頁面的;

2.當(dāng)前頁面可以訪問mixin的data和methods;

3.mixin里的方法可以調(diào)用頁面的data和methods;

4.可以在當(dāng)前頁面改變mixin里的data

注意:當(dāng)本組件與mixin有同名方法或同名數(shù)據(jù)時,優(yōu)先調(diào)用本組件的方法或數(shù)據(jù),混入的部分失效 

以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • uni-app項(xiàng)目中引入Vant?UI組件庫完美避坑指南(純凈版)

    uni-app項(xiàng)目中引入Vant?UI組件庫完美避坑指南(純凈版)

    網(wǎng)上百度uniapp使用vant時,很多答案都是在根路徑下創(chuàng)建文件夾,而且都是基于小程序環(huán)境的,其實(shí)uniapp可以直接使用的,這篇文章主要給大家介紹了關(guān)于uni-app項(xiàng)目中引入Vant?UI組件庫完美避坑指南的相關(guān)資料,需要的朋友可以參考下
    2024-02-02
  • Vue.js中vue-property-decorator的使用方法詳解

    Vue.js中vue-property-decorator的使用方法詳解

    vue-property-decorator是一個用于在Vue.js中使用TypeScript裝飾器的庫,它能夠簡化 Vue 組件的定義,使代碼更加簡潔和可維護(hù),它能夠簡化Vue組件的定義,使代碼更加簡潔和可維護(hù),本文將深入探討vue-property-decorator的使用方法,并展示如何在Vue.js項(xiàng)目中應(yīng)用它
    2024-08-08
  • vue 添加vux的代碼講解

    vue 添加vux的代碼講解

    通過命令npm install vux --save添加vux,在相關(guān)配置文件中配置信息,具體代碼添加方法,大家參考下本文
    2017-11-11
  • vue實(shí)現(xiàn)子路由調(diào)用父路由的方法

    vue實(shí)現(xiàn)子路由調(diào)用父路由的方法

    這篇文章主要介紹了vue實(shí)現(xiàn)子路由調(diào)用父路由的方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-06-06
  • vue項(xiàng)目設(shè)置打包后的靜態(tài)文件訪問路徑

    vue項(xiàng)目設(shè)置打包后的靜態(tài)文件訪問路徑

    這篇文章主要介紹了vue項(xiàng)目設(shè)置打包后的靜態(tài)文件訪問路徑,vue項(xiàng)目的最終項(xiàng)目文件需要經(jīng)過打包輸出,靜態(tài)文件的訪問路徑需要在vue.config.js文件中設(shè)置,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2024-02-02
  • Vue數(shù)據(jù)雙向綁定底層實(shí)現(xiàn)原理

    Vue數(shù)據(jù)雙向綁定底層實(shí)現(xiàn)原理

    這篇文章主要為大家詳細(xì)介紹了Vue數(shù)據(jù)雙向綁定底層實(shí)現(xiàn)原理,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-11-11
  • vue 實(shí)現(xiàn)超長文本截取,懸浮框提示

    vue 實(shí)現(xiàn)超長文本截取,懸浮框提示

    這篇文章主要介紹了vue 實(shí)現(xiàn)超長文本截取,懸浮框提示,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • Vue3?Suspense實(shí)現(xiàn)優(yōu)雅處理異步數(shù)據(jù)加載

    Vue3?Suspense實(shí)現(xiàn)優(yōu)雅處理異步數(shù)據(jù)加載

    Suspense?是?Vue?3?中用于處理異步數(shù)據(jù)加載的特性,它使得在加載異步數(shù)據(jù)時可以提供更好的用戶體驗(yàn),下面小編就來和大家詳細(xì)講講Suspense如何優(yōu)雅處理異步數(shù)據(jù)加載吧
    2023-10-10
  • vue-router傳參的四種方式超詳細(xì)講解

    vue-router傳參的四種方式超詳細(xì)講解

    這篇文章主要介紹了vue-router傳參的四種方式超詳細(xì),有router-link路由導(dǎo)航方式傳參,調(diào)用$router.push實(shí)現(xiàn)路由傳參,通過路由屬性name匹配路由,再根據(jù)params傳遞參數(shù)等等,結(jié)合示例代碼講解的非常詳細(xì),需要的朋友可以參考下
    2022-12-12
  • vue如何實(shí)現(xiàn)二進(jìn)制流文件導(dǎo)出excel

    vue如何實(shí)現(xiàn)二進(jìn)制流文件導(dǎo)出excel

    這篇文章主要介紹了vue如何實(shí)現(xiàn)二進(jìn)制流文件導(dǎo)出excel,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-06-06

最新評論