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

Vue組件化(ref,props,?mixin,.插件)詳解

 更新時(shí)間：2022年05月15日 11:42:49   作者：毛毛的貓毛  
這篇文章主要介紹了Vue組件化(ref,?props,?mixin,?插件)的相關(guān)知識(shí),包括ref屬性，props配置項(xiàng)及mixin混入的方式，本文通過(guò)示例代碼多種方式相結(jié)合給大家介紹的非常詳細(xì)，需要的朋友可以參考下

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文件,編寫混入以及提供外部引用的接口，即暴露。

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ì)象。插件中要編寫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)文章

最新評(píng)論