前言
在項(xiàng)目開發(fā)中弧可，現(xiàn)有的一些ui框架其實(shí)是很不錯(cuò)的，但是坑也不少蒿往，加上我們的一些業(yè)務(wù)需求盛垦，其實(shí)這些框架的功能是不能去實(shí)現(xiàn)的，這時(shí)候瓤漏，我們可以結(jié)合 Vue 組件化的特性腾夯，開發(fā)可復(fù)用且適合我們業(yè)務(wù)的組件是很有必要的，以便提高開發(fā)效率和質(zhì)量蔬充。
封裝組件的步驟
- 思考這個(gè)組件需要實(shí)現(xiàn)什么
- 寫寫這個(gè)組件的基本樣式蝶俱，大致效果是怎樣的
- 實(shí)現(xiàn)的基本邏輯是怎樣
- 數(shù)據(jù)結(jié)構(gòu)、方法以及他們?nèi)绾蝹髦导⒙⒈┞?/li>
- 注冊(cè)榨呆、調(diào)用
實(shí)現(xiàn)什么
實(shí)現(xiàn)一個(gè)select單選的組件，通過父組件傳入待選項(xiàng)庸队，select組件進(jìn)行選擇
通過Prop向子組件傳遞數(shù)據(jù)
Vue 的組件作用域都是孤立的积蜻，不允許在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。必須使用特定的方法才能實(shí)現(xiàn)組件之間的數(shù)據(jù)傳遞彻消。
所有的 prop 都使得其父子 prop 之間形成了一個(gè)單向下行綁定：父級(jí) prop 的更新會(huì)向下流動(dòng)到子組件中竿拆，但是反過來則不行.當(dāng)然對(duì) props 傳遞的參數(shù)應(yīng)該添加一些驗(yàn)證規(guī)則；當(dāng) prop 驗(yàn)證失敗的時(shí)候证膨，(開發(fā)環(huán)境構(gòu)建版本的) Vue 將會(huì)產(chǎn)生一個(gè)控制臺(tái)的警告如输。
Invalid prop: type check failed for prop "data". Expected Array, got String.
// 子組件
props: {
data: Array，
require: true
},
// 父組件
return {
// prop指定類型后央勒，傳入的值也應(yīng)該是相對(duì)應(yīng)的類型，否則會(huì)報(bào)錯(cuò)
data: 'sss',
selectValue: ''
}
prop類型
String澳化、Number崔步、Boolean、Array缎谷、Object
prop類型檢測(cè)
default井濒、required、自定義驗(yàn)證
通過事件向父級(jí)組件發(fā)送消息
在組件開發(fā)中列林，要求我們與父組件進(jìn)行溝通瑞你，我們可以調(diào)用內(nèi)建的this.$emit 方法并傳入事件的名字，來向父級(jí)組件觸發(fā)一個(gè)事件;
子組件通過觸發(fā)父組件的函數(shù)希痴，我們?cè)诟附M件中監(jiān)聽這個(gè)事件者甲，就像原生DOM事件一樣
使用事件拋出一個(gè)值，用于改變父組件的選中值
// change是觸發(fā)父組件的函數(shù)
this.$emit('change', value)
組件注冊(cè)
局部注冊(cè)：
components: {
Select
},
代碼
父組件：
<template>
<div id="app">
<h2>自定義組件</h2>
<Select @change="getSelectValue" :data="data"></Select>
<div>這是父組件獲取到的值：{{selectValue}}</div>
</div>
</template>
<script>
import Select from './components/Select.vue'
export default {
name: 'app',
components: {
Select
},
data () {
return {
data: ['蘋果', '香蕉', '葡萄', '草莓', '西瓜'],
selectValue: ''
}
},
methods: {
/**
* @description 獲取select選中值
* @param {object|array} value 當(dāng)前選中值
*/
getSelectValue (value) {
this.selectValue = value
}
}
}
</script>
子組件：
<template>
<div id="my-select">
<div @click="showSelectList" class="value-box">
<span v-if="!value" class="tip">請(qǐng)選擇</span>
<span v-else class="value">{{value}}</span>
</div>
<ul v-show="selectShow">
<li v-for="(item, index) in data" :key="index" @click="choseValue(item)">{{item}}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Select',
props: {
data: Array
},
data () {
return {
selectShow: false,
value: ''
}
},
methods: {
// [showSelectList 顯示選項(xiàng)]
showSelectList () {
this.selectShow = true
},
/**
* @description 選擇當(dāng)前項(xiàng)
* @param {string} value 當(dāng)前選中值
*/
choseValue (value) {
this.value = value
this.selectShow = false
this.$emit('change', value)
}
}
}
</script>
小作業(yè)
在以上select的基礎(chǔ)上砌创，增加多選操作
