Vue組件化(ref,props,?mixin,.插件)詳解
1、ref屬性
- 被用來(lái)給元素或子組件注冊(cè)引用信息（id的替代者）
- 應(yīng)用在html標(biāo)簽上獲取的是真實(shí)DOM元素，應(yīng)用在組件標(biāo)簽上是組件實(shí)例對(duì)象（vc）
- 使用方式：
打標(biāo)識(shí)：<h1 ref="xxx">.....</h1>或 <School ref="xxx"></School>
獲?。?code>this.$refs.xxx
2、props配置項(xiàng)
如果我們需要子組件收到父組件傳來(lái)的數(shù)據(jù)，就可以使用props配置項(xiàng)。
<Student name="李四" sex="女" :age="18"/>
在App通過(guò)標(biāo)簽屬性為Student傳遞數(shù)據(jù)，需要在Student中接收傳遞來(lái)的數(shù)據(jù)，有三種接收方式。
第一種方式（只接收）：
props:[‘name',‘a(chǎn)ge',‘sex']
第二種方式（限制類型）：
props: {
name: String,
age: Number,
sex: String
}第三種方式（限制類型、限制必要性、指定默認(rèn)值）：
props: {
name: {
type: String, //name的類型是字符串
required: true, //name是必要的
},
age: {
type: Number,
default: 99 //默認(rèn)值
},
sex: {
type: String,
required: true
}
}必要性與默認(rèn)值只設(shè)置一個(gè)即可。
<!--Student-->
<template>
<div>
<h1>{{ msg }}</h1>
<h2>學(xué)生姓名：{{ name }}</h2>
<h2>學(xué)生性別：{{ sex }}</h2>
<h2>學(xué)生年齡：{{ myAge }}</h2>
<button @click="updateAge">嘗試修改收到的年齡</button>
</div>
</template>
<!--App-->
<template>
<div>
<Student name="張三" sex="男"/>
<Student name="李四" sex="女" :age="18"/>
</div>
</template>
props總結(jié)
- 功能：讓組件接收外部傳過(guò)來(lái)的數(shù)據(jù)
- 傳遞數(shù)據(jù)：
<Demo name="xxx"/> - 接收數(shù)據(jù)：
第一種方式（只接收）：props:['name']
第二種方式（限制類型）：props:{name:String}
第三種方式（限制類型、限制必要性、指定默認(rèn)值）：
props:{
name:{
type:String, //類型
required:true, //必要性
default:'老王' //默認(rèn)值
}
}備注：props是只讀的，Vue底層會(huì)監(jiān)測(cè)你對(duì)props的修改，如果進(jìn)行了修改，就會(huì)發(fā)出警告，若業(yè)務(wù)需求確實(shí)需要修改，那么請(qǐng)復(fù)制props的內(nèi)容到data中一份，然后去修改data中的數(shù)據(jù)。
3、mixin混入
混入用于抽離出多個(gè)組件的公共部分，包括函數(shù)和數(shù)據(jù)。在使用時(shí)候引入，能有效提高代碼的復(fù)用性，混入本質(zhì)上是一個(gè)對(duì)象。
混入的使用有兩種：
- 局部混入，在需要引入混入的組件中引入即可，
- 全局混入，即給所有的組件引入混入。
3.1、局部混入
我們定義混入，封裝一個(gè)方法，以及攜帶一些數(shù)據(jù)。
定義一個(gè)mixin.js文件,編寫(xiě)混入以及提供外部引用的接口，即暴露。
export const hunhe = {
methods: {
showName(){
alert(this.name)
}
},
mounted() {
console.log('你好?。?)
},
}
export const hunhe2 = {
data() {
return {
x:100,
y:200
}
},
}接下來(lái)在School與Student中引入混入
import {hunhe,hunhe2} from '../mixin'
mixins:[hunhe,hunhe2],
3.2、全局混入
全局混入在main.js中配置
import {hunhe,hunhe2} from './mixin'
Vue.mixin(hunhe)
Vue.mixin(hunhe2)mixin混入總結(jié)
- 功能：可以把多個(gè)組件共用的配置提取成一個(gè)混入對(duì)象
- 使用方式：
第一步定義混合：
{
data(){....},
methods:{....}
....
}第二步使用混入：
全局混入：Vue.mixin(xxx)
局部混入：mixins:['xxx']
4、插件
插件的應(yīng)用與混入的應(yīng)用差不多。
首先建立一個(gè)js文件，在里面建立插件，插件本質(zhì)上也是一個(gè)對(duì)象。插件中要編寫(xiě)install函數(shù)，函數(shù)的第一個(gè)參數(shù)是Vue對(duì)象，也可以繼續(xù)傳遞參數(shù)。
export default {
install(Vue, x, y, z) {
console.log(x, y, z)
//全局過(guò)濾器
Vue.filter('mySlice', function (value) {
return value.slice(0, 4)
})
//定義全局指令
Vue.directive('fbind', {
//指令與元素成功綁定時(shí)（一上來(lái)）
bind(element, binding) {
element.value = binding.value
},
//指令所在元素被插入頁(yè)面時(shí)
inserted(element, binding) {
element.focus()
},
//指令所在的模板被重新解析時(shí)
update(element, binding) {
element.value = binding.value
}
})
//定義混入
Vue.mixin({
data() {
return {
x: 100,
y: 200
}
},
})
//給Vue原型上添加一個(gè)方法（vm和vc就都能用了）
Vue.prototype.hello = () => {
alert('你好啊')
}
}
}
接著引入并使用插件即可，依然是在main.js里，這樣就能全局的使用插件了。
//引入插件 import plugins from './plugins' //應(yīng)用（使用）插件 第一個(gè)參數(shù)名字與插件的名字一致 Vue.use(plugins,1,2,3)
插件總結(jié)
- 功能：用于增強(qiáng)Vue
- 本質(zhì)：包含install方法的一個(gè)對(duì)象，install的第一個(gè)參數(shù)是Vue，第二個(gè)以后的參數(shù)是插件使用者傳遞的數(shù)據(jù)。
- 定義插件：
對(duì)象.install = function (Vue, options) {
// 1. 添加全局過(guò)濾器
Vue.filter(....)
// 2. 添加全局指令
Vue.directive(....)
// 3. 配置全局混入(合)
Vue.mixin(....)
// 4. 添加實(shí)例方法
Vue.prototype.$myMethod = function () {...}
Vue.prototype.$myProperty = xxxx
}使用插件：Vue.use()
到此這篇關(guān)于Vue組件化(ref, props, mixin, 插件)詳解的文章就介紹到這了,更多相關(guān)vue組件化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用WebSocket+SpringBoot+Vue搭建簡(jiǎn)易網(wǎng)頁(yè)聊天室的實(shí)現(xiàn)代碼
這篇文章主要介紹了使用WebSocket+SpringBoot+Vue搭建簡(jiǎn)易網(wǎng)頁(yè)聊天室的實(shí)現(xiàn),具體的步驟如下,需要的朋友可以參考下2023-03-03
Vue.js處理API請(qǐng)求失敗的最佳實(shí)踐和策略
在現(xiàn)代Web開(kāi)發(fā)中,與后端API的交互是不可避免的,然而,網(wǎng)絡(luò)請(qǐng)求是不穩(wěn)定的,可能會(huì)因?yàn)楦鞣N原因失敗,因此,優(yōu)雅地處理API請(qǐng)求失敗的情況是提升用戶體驗(yàn)和應(yīng)用穩(wěn)定性的關(guān)鍵,本文將詳細(xì)介紹在Vue.js中處理API請(qǐng)求失敗的最佳實(shí)踐和策略,需要的朋友可以參考下2024-12-12
vue3 element-plus el-tree自定義圖標(biāo)方式
這篇文章主要介紹了vue3 element-plus el-tree自定義圖標(biāo)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue中使用v-print打印出現(xiàn)空白頁(yè)問(wèn)題及解決
這篇文章主要介紹了Vue中使用v-print打印出現(xiàn)空白頁(yè)問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
vue實(shí)現(xiàn)簡(jiǎn)易的雙向數(shù)據(jù)綁定
這篇文章主要介紹了vue如何實(shí)現(xiàn)簡(jiǎn)易的雙向數(shù)據(jù)綁定，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了Vue中的reactive函數(shù),本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
關(guān)于vue的語(yǔ)法規(guī)則檢測(cè)報(bào)錯(cuò)問(wèn)題的解決
在配置路有的時(shí)候，陸續(xù)出現(xiàn)了各種報(bào)錯(cuò)其中最多的是一些寫(xiě)法，例如空格，縮進(jìn)，各種括號(hào)，這篇文章主要介紹了關(guān)于vue的語(yǔ)法規(guī)則檢測(cè)報(bào)錯(cuò)問(wèn)題的解決，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-05-05
Vue項(xiàng)目環(huán)境搭建詳細(xì)總結(jié)
這篇文章主要為大家介紹了Vue項(xiàng)目環(huán)境搭建總結(jié)篇，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要為大家介紹了Vuecli3配置代理及遇到的問(wèn)題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
nextTick是Vue提供的一個(gè)全局API，由于Vue的異步更新策略導(dǎo)致我們對(duì)數(shù)據(jù)的修改不會(huì)立刻體現(xiàn)，在DOM變化上，此時(shí)如果想要立即獲取更新后的DOM狀態(tài)，就需要使用這個(gè)方法，這篇文章主要介紹了解析VUE中nextTick,需要的朋友可以參考下2022-11-11