您好,登錄后才能下訂單哦!
這篇文章主要介紹“Vue組件化ref,props, mixin怎么使用”的相關(guān)知識(shí),小編通過(guò)實(shí)際案例向大家展示操作過(guò)程,操作方法簡(jiǎn)單快捷,實(shí)用性強(qiáng),希望這篇“Vue組件化ref,props, mixin怎么使用”文章能幫助大家解決問(wèn)題。
被用來(lái)給元素或子組件注冊(cè)引用信息(id的替代者)
應(yīng)用在html標(biāo)簽上獲取的是真實(shí)DOM元素,應(yīng)用在組件標(biāo)簽上是組件實(shí)例對(duì)象(vc)
使用方式:
打標(biāo)識(shí):<h2 ref="xxx">.....</h2>
或 <School ref="xxx"></School>
獲取:this.$refs.xxx
如果我們需要子組件收到父組件傳來(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> <h2>{{ msg }}</h2> <h3>學(xué)生姓名:{{ name }}</h3> <h3>學(xué)生性別:{{ sex }}</h3> <h3>學(xué)生年齡:{{ myAge }}</h3> <button @click="updateAge">嘗試修改收到的年齡</button> </div> </template> <!--App--> <template> <div> <Student name="張三" sex="男"/> <Student name="李四" sex="女" :age="18"/> </div> </template>
功能:讓組件接收外部傳過(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ù)。
混入用于抽離出多個(gè)組件的公共部分,包括函數(shù)和數(shù)據(jù)。在使用時(shí)候引入,能有效提高代碼的復(fù)用性,混入本質(zhì)上是一個(gè)對(duì)象。
混入的使用有兩種:
局部混入,在需要引入混入的組件中引入即可,
全局混入,即給所有的組件引入混入。
我們定義混入,封裝一個(gè)方法,以及攜帶一些數(shù)據(jù)。
定義一個(gè)mixin.js文件,編寫混入以及提供外部引用的接口,即暴露。
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],
全局混入在main.js中配置
import {hunhe,hunhe2} from './mixin' Vue.mixin(hunhe) Vue.mixin(hunhe2)
功能:可以把多個(gè)組件共用的配置提取成一個(gè)混入對(duì)象
使用方式:
第一步定義混合:
{ data(){....}, methods:{....} .... }
第二步使用混入:
全局混入:Vue.mixin(xxx)
局部混入:mixins:['xxx']
插件的應(yīng)用與混入的應(yīng)用差不多。
首先建立一個(gè)js文件,在里面建立插件,插件本質(zhì)上也是一個(gè)對(duì)象。插件中要編寫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)
功能:用于增強(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怎么使用”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí),可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。