Vue元件化(ref,props, mixin,.外掛)詳解

2022-05-15 16:00:29

1、ref屬性

被用來給元素或子元件註冊參照資訊（id的替代者）
應用在html標籤上獲取的是真實DOM元素，應用在元件標籤上是元件範例物件（vc）
使用方式：

打標識：<h1 ref="xxx">.....</h1>或 <School ref="xxx"></School>

獲取：this.$refs.xxx

2、props設定項

如果我們需要子元件收到父元件傳來的資料，就可以使用props設定項。

<Student name="李四" sex="女" :age="18"/>

在App通過標籤屬性為Student傳遞資料，需要在Student中接收傳遞來的資料，有三種接收方式。

第一種方式（只接收）：

props:[‘name',‘age',‘sex']

第二種方式（限制型別）：

props: {
name: String,
age: Number,
sex: String
}

第三種方式（限制型別、限制必要性、指定預設值）：

props: {
name: {
type: String, //name的型別是字串
required: true, //name是必要的
},
age: {
type: Number,
default: 99 //預設值
},
sex: {
type: String,
required: true
}
}

必要性與預設值只設定一個即可。

<!--Student-->
<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>學生姓名：{{ name }}</h2>
    <h2>學生性別：{{ sex }}</h2>
    <h2>學生年齡：{{ myAge }}</h2>
    <button @click="updateAge">嘗試修改收到的年齡</button>
  </div>
</template>
<!--App-->
<template>
	<div>
		<Student name="張三" sex="男"/>
    	<Student name="李四" sex="女" :age="18"/>
	</div>
</template>

props總結

功能：讓元件接收外部傳過來的資料
傳遞資料：<Demo name="xxx"/>
接收資料：

第一種方式（只接收）：props:['name']

第二種方式（限制型別）：props:{name:String}

第三種方式（限制型別、限制必要性、指定預設值）：

props:{
	name:{
	type:String, //型別
	required:true, //必要性
	default:'老王' //預設值
	}
}

備註：props是唯讀的，Vue底層會監測你對props的修改，如果進行了修改，就會發出警告，若業務需求確實需要修改，那麼請複製props的內容到data中一份，然後去修改data中的資料。

3、mixin混入

混入用於抽離出多個元件的公共部分，包括函數和資料。在使用時候引入，能有效提高程式碼的複用性，混入本質上是一個物件。

混入的使用有兩種：

區域性混入，在需要引入混入的元件中引入即可，
全域性混入，即給所有的元件引入混入。

3.1、區域性混入

我們定義混入，封裝一個方法，以及攜帶一些資料。

定義一個mixin.js檔案,編寫混入以及提供外部參照的介面，即暴露。

export const hunhe = {
	methods: {
		showName(){
			alert(this.name)
		}
	},
	mounted() {
		console.log('你好啊！')
	},
}
export const hunhe2 = {
	data() {
		return {
			x:100,
			y:200
		}
	},
}

接下來在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混入總結

功能：可以把多個元件共用的設定提取成一個混入物件
使用方式：

第一步定義混合：

{
    data(){....},
    methods:{....}
    ....
}

第二步使用混入：

全域性混入：Vue.mixin(xxx)
區域性混入：mixins:['xxx']

4、外掛

外掛的應用與混入的應用差不多。

首先建立一個js檔案，在裡面建立外掛，外掛本質上也是一個物件。外掛中要編寫install函數，函數的第一個引數是Vue物件，也可以繼續傳遞引數。

export default {
    install(Vue, x, y, z) {
        console.log(x, y, z)
        //全域性過濾器
        Vue.filter('mySlice', function (value) {
            return value.slice(0, 4)
        })
        //定義全域性指令
        Vue.directive('fbind', {
            //指令與元素成功繫結時（一上來）
            bind(element, binding) {
                element.value = binding.value
            },
            //指令所在元素被插入頁面時
            inserted(element, binding) {
                element.focus()
            },
            //指令所在的模板被重新解析時
            update(element, binding) {
                element.value = binding.value
            }
        })
        //定義混入
        Vue.mixin({
            data() {
                return {
                    x: 100,
                    y: 200
                }
            },
        })
        //給Vue原型上新增一個方法（vm和vc就都能用了）
        Vue.prototype.hello = () => {
            alert('你好啊')
        }
    }
}

接著引入並使用外掛即可，依然是在main.js裡，這樣就能全域性的使用外掛了。

//引入外掛
import plugins from './plugins'
//應用（使用）外掛  第一個引數名字與外掛的名字一致
Vue.use(plugins,1,2,3)

外掛總結

功能：用於增強Vue
本質：包含install方法的一個物件，install的第一個引數是Vue，第二個以後的引數是外掛使用者傳遞的資料。
定義外掛：

物件.install = function (Vue, options) {
    // 1. 新增全域性過濾器
    Vue.filter(....)
    // 2. 新增全域性指令
    Vue.directive(....)
    // 3. 設定全域性混入(合)
    Vue.mixin(....)
    // 4. 新增實體方法
    Vue.prototype.$myMethod = function () {...}
    Vue.prototype.$myProperty = xxxx
}

使用外掛：Vue.use()

到此這篇關於Vue元件化(ref, props, mixin, 外掛)詳解的文章就介紹到這了,更多相關vue元件化內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！