vue封裝組件js版基本步驟
更新時間：2022年04月29日 15:39:52 作者：騙你學計算機
這篇文章主要為大家介紹了vue封裝組件js版基本步驟，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
什么是組件化：
組件化就是將一個頁面拆分成一個個小的功能模塊，每個功能模塊完成屬于自己這部分獨立的功能，使得整個頁面的管理和維護變得非常容易。
Vue組件化思想
- 組件化是Vue中的重要思想，當我們對vue的基本知識有了一定的基礎(chǔ)就要開始封裝組件了
它提供了一種抽象，讓我們可以開發(fā)出一個個獨立可復用的小組件來構(gòu)造我們的應用。組件樹。
- 組件化思想的應用
1.在項目中充分利用組件化的思想
2.盡可能的將也頁面拆分成一個個小的可復用的組件
3.好處：代碼更加方便組織和管理，擴展性也更強
一.注冊組件的基本步驟
下面我們用一個封裝一個Element Ui 的輸入框組件為例，貫徹全文
組件的使用分成三個步驟
1.創(chuàng)建組件構(gòu)造器c-input
組件的模板 template
注意：只能有一個根元素，否則警告報錯
1 template 可以是字面量字符串，缺點是沒有高亮，內(nèi)置在 JavaScript 中，寫起來麻煩
2 template 可以寫在 script 標簽中，雖然解決了高亮的問題，但是也麻煩
3 以上方式都不好，我們最終的解決方案是使用 Vue 的 .vue 單文件組件來寫。（webpack）
但是要想使用這種方式必須結(jié)合一些構(gòu)建工具
<template>
<el-input >
</el-input>
</template>2.注冊組件
注冊組件 分為 局部注冊 與 全局注冊，下一章再講
......使用代碼.........
import cInput from "組件地址/c-ipunt.vue";
export default {
components: {cInput},
.......3.父組件使用
<template>
<c-ipunt/>
</template>
<script>
import cInput from "組件地址/c-ipunt.vue";
export default {
components: {cInput},
.......
</script>二.豐富組件
組件是獨立的作用域，就像我們 Node 中的 JavaScript 模塊一樣，獨立的
組件其實就是一個特殊的 Vue 實例，可以有自己的 data、methods、computed、watch 等等選項
組件的 data 必須是函數(shù)
函數(shù)中返回一個對象作為組件的 data
<template>
<el-input >
</el-input>
</template>
<script>
export default {
name: 'c-input',
model: {
prop: 'value',
event: 'input',
},
props: {
},
data() {
return {
}
},
watch: {
},
methods: {
},
mounted() {
},
}
</script>
<style scoped>
</style>三.父子組件間的通訊
1.父---->子通信 [props Down]
父組件通過 props 向下傳遞數(shù)據(jù)給子組件
所以子組件要定義接收的參數(shù)
我們可以看到Element Ui 的輸入框組件，有這些屬性我們可以重新定義封裝
<template>
<el-input :disabled="disabled" ref="input" :placeholder="placeholder"
:type="type" :auto-complete="autocomplete">
</el-input>
</template>
<script>
export default {
name: 'c-input',
model: {
prop: 'value',
event: 'input',
},
props: {
labelwidth: {
type: String,
default: undefined,
},
autosize: {
default() {
return { minRows: 2, maxRows: 4 }//如果不使用這個屬性的默認值
},
},
inputCss: {
type: String,
default: '',
},
label: {
type: String,
default: '',
},
value: {
default: undefined,
},
prop: {
type: String,
default: null,
},
placeholder: {
type: String,
default: undefined,
},
required: {
type: Boolean,
default: false,
},
width: {
type: String,
},
type: {
type: String,
default: undefined,
},
autocomplete: {
type: String,
default: 'on',
},
disabled: {
type: Boolean,
default: false,
},
span: {
type: Number,
},
},
data() {
return {
}
},
watch: {
},
methods: {
},
mounted() {
},
}
</script>
<style scoped>
</style>父組件使用
<template>
<c-input label="用戶名" :span="12" />
</template>
<script>
import cInput from "組件地址/c-ipunt.vue";
export default {
components: {cInput},
.......
</script>2. 子----> 父傳值 [Events Up]
子組件通過 events 給父組件發(fā)送消息，實際上就是子組件把自己的數(shù)據(jù)發(fā)送到父組件。
在 element ui 的 el-input中是有@input.native="updateValue($event.target.value)" 獲取現(xiàn)在輸入值 @keyup.enter.native="handleEnter" 回車 @focus="focus" 得到焦點 等事件的
<template>
<el-input :disabled="disabled" ref="input" :placeholder="placeholder"
:type="type" :auto-complete="autocomplete" @input.native="updateValue($event.target.value)" @keyup.enter.native="handleEnter" @focus="focus">
</el-input>
</template>
<script>
export default {
name: 'c-input',
model: {
prop: 'value',
event: 'input',
},
props: {
labelwidth: {
type: String,
default: undefined,
},
autosize: {
default() {
return { minRows: 2, maxRows: 4 }//如果不使用這個屬性的默認值
},
},
inputCss: {
type: String,
default: '',
},
label: {
type: String,
default: '',
},
value: {
default: undefined,
},
prop: {
type: String,
default: null,
},
placeholder: {
type: String,
default: undefined,
},
required: {
type: Boolean,
default: false,
},
width: {
type: String,
},
type: {
type: String,
default: undefined,
},
autocomplete: {
type: String,
default: 'on',
},
disabled: {
type: Boolean,
default: false,
},
span: {
type: Number,
},
},
data() {
return {
}
},
watch: {
},
methods: {
updateValue(val) {
this.$emit('input', val)
},
handleEnter() {
this.$emit('keyup-enter')
},
focus() {
this.$emit('focus')
},
},
mounted() {
},
}
</script>
<style scoped>
</style>父組件使用
<template>
<c-input label="用戶名" :span="12" @keyup-enter="mykeyupEnter" @focus="myfocus"/>
</template>
<script>
import cInput from "組件地址/c-ipunt.vue";
export default {
components: {cInput},
.......
methods: {
mykeyupEnter(){
console.log("我是父組件的輸入框回車")},
myfocus(){
console.log("我是父組件的輸入框得到焦點")
}
},
......
</script>3. 子<----> 父 雙向傳值
我們知道Vue的核心特性之一是雙向綁定，
v-model是一個指令用來實現(xiàn)雙向綁定，限制在<input>、<select>、<textarea>、components中使用，修飾符.lazy(取代input監(jiān)聽change事件)、.number(輸入字符串轉(zhuǎn)為有效的數(shù)字)、.trim(輸入首尾空格過濾)。那么我們封裝的組件怎么進行雙向綁定呢。
- 首先 props添加一個value，接收父組件的數(shù)據(jù)變化。
- 再添加一個value的監(jiān)聽，監(jiān)聽父組件的數(shù)據(jù)變化。
- 而子組件數(shù)據(jù)變化的時候會出發(fā)這個事件@input.native=""，所以這個時間觸發(fā)this.$emit('input',val)，向父組件傳遞 子組件的數(shù)據(jù)變化
<template>
<el-input :disabled="disabled" ref="input" :placeholder="placeholder"
:type="type" :auto-complete="autocomplete" @input.native="updateValue($event.target.value)" @keyup.enter.native="handleEnter" @focus="focus" v-model="modelValue">
</el-input>
</template>
<script>
export default {
name: 'c-input',
model: {
prop: 'value',
event: 'input',
},
props: {
labelwidth: {
type: String,
default: undefined,
},
autosize: {
default() {
return { minRows: 2, maxRows: 4 }//如果不使用這個屬性的默認值
},
},
inputCss: {
type: String,
default: '',
},
label: {
type: String,
default: '',
},
value: {
default: undefined,
},
prop: {
type: String,
default: null,
},
placeholder: {
type: String,
default: undefined,
},
required: {
type: Boolean,
default: false,
},
width: {
type: String,
},
type: {
type: String,
default: undefined,
},
autocomplete: {
type: String,
default: 'on',
},
disabled: {
type: Boolean,
default: false,
},
span: {
type: Number,
},
},
data() {
return {
modelValue: undefined,
}
},
watch: {
value: {
handler(newValue) {
this.modelValue = newValue
},
immediate: true,
},
},
methods: {
updateValue(val) {
this.$emit('input', val)
},
handleEnter() {
this.$emit('keyup-enter')
},
focus() {
this.$emit('focus')
},
},
mounted() {
},
}
</script>
<style scoped>
</style>使用
<template>
<c-input label="用戶名" :span="12" @keyup-enter="mykeyupEnter" @focus="myfocus" v-model="myName"/>
</template>
<script>
import cInput from "組件地址/c-ipunt.vue";
export default {
components: {cInput},
data() {
return {
myName: undefined,
}},
.......
methods: {
mykeyupEnter(){
console.log("我是父組件的輸入框回車")},
myfocus(){
console.log("我是父組件的輸入框得到焦點")
}
},
......
</script>四.slot插槽
什么是插槽？
插槽（Slot）是Vue提出來的一個概念，正如名字一樣，插槽用于決定將所攜帶的內(nèi)容，插入到指定的某個位置，從而使模板分塊，具有模塊化的特質(zhì)和更大的重用性。
插槽顯不顯示、怎樣顯示是由父組件來控制的，而插槽在哪里顯示就由子組件來進行控制
怎么用插槽？
默認插槽
父組件
<template>
<div>
我是父組件
<slotOne1>
<p style="color:red">我是父組件插槽內(nèi)容</p>
</slotOne1>
</div>
</template>在父組件引用的子組件中寫入想要顯示的內(nèi)容（可以使用標簽，也可以不用）
子組件(slotOne1)
<template>
<div class="slotOne1">
<div>我是slotOne1組件</div>
<slot></slot>
</div>
</template>在子組件中寫入slot，slot所在的位置就是父組件要顯示的內(nèi)容
具名插槽
子組件
<template>
<div class="slottwo">
<div>slottwo</div>
<slot name="header"></slot>
<slot></slot>
<slot name="footer"></slot>
</div>
</template>在子組件中定義了三個slot標簽，其中有兩個分別添加了name屬性header和footer
父組件
<template>
<div>
我是父組件
<slot-two>
<p>啦啦啦，啦啦啦，我是賣報的小行家</p>
<template slot="header">
<p>我是name為header的slot</p>
</template>
<p slot="footer">我是name為footer的slot</p>
</slot-two>
</div>
</template>在父組件中使用template并寫入對應的slot值來指定該內(nèi)容在子組件中現(xiàn)實的位置（當然也不用必須寫到template），沒有對應值的其他內(nèi)容會被放到子組件中沒有添加name屬性的slot中
作用域插槽
子組件
<template>
<div>
我是作用域插槽的子組件
<slot :data="user"></slot>
</div>
</template>
<script>
export default {
name: 'slotthree',
data () {
return {
user: [
{name: 'Jack', sex: 'boy'},
{name: 'Jone', sex: 'girl'},
{name: 'Tom', sex: 'boy'}
]
}
}
}
</script>在子組件的slot標簽上綁定需要的值
父組件
<template>
<div>
我是作用域插槽
<slot-three>
<template slot-scope="user">
<div v-for="(item, index) in user.data" :key="index">
{{item}}
</div>
</template>
</slot-three>
</div>
</template>在父組件上使用slot-scope屬性，user.data就是子組件傳過來的值
以上就是vue封裝組件js版基本步驟的詳細內(nèi)容，更多關(guān)于js封裝vue組件的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了vue 使用 canvas 實現(xiàn)手寫電子簽名功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
vue-cli3.0如何使用CDN區(qū)分開發(fā)、生產(chǎn)、預發(fā)布環(huán)境
這篇文章主要介紹了vue-cli3.0如何使用CDN區(qū)分開發(fā)、生產(chǎn)、預發(fā)布環(huán)境，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
Vue生產(chǎn)環(huán)境調(diào)試的方法步驟
開發(fā)環(huán)境下Vue會提供很多警告來幫你對付常見的錯誤與陷阱,而在生產(chǎn)環(huán)境下,這些警告語句卻沒有用,反而會增加應用的體積,下面這篇文章主要給大家介紹了關(guān)于Vue生產(chǎn)環(huán)境調(diào)試的方法步驟,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了vue數(shù)組動態(tài)刷新失敗問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了關(guān)于vue雙向綁定帶來的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
在看這篇文章的幾點要求：需要你先知道Vue-Router是個什么東西，用來解決什么問題，以及它的基本使用。如果你還不懂的話，建議上官網(wǎng)了解下Vue-Router的基本使用后再回來看這篇文章2022-09-09
這篇文章主要介紹了vue中引入mousewheel事件及兼容性處理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue 微信端掃描二維碼蘋果端卻只能保存圖片問題(解決方法)
這幾天在做項目時遇到微信掃描二維碼的然后進入公眾號網(wǎng)頁巴拉巴拉的，然后就很順利的遇到了在安卓端掃碼的時候，順利的一塌糊涂，然后到了蘋果端的時候，就只能出現(xiàn)一個保存圖片，然后就寫一下記錄一下這問題的解決方法2020-01-01
vue數(shù)據(jù)監(jiān)聽解析Object.defineProperty與Proxy區(qū)別
這篇文章主要為大家介紹了vue數(shù)據(jù)監(jiān)聽解析Object.defineProperty Proxy源碼示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
keep-Alive搭配vue-router實現(xiàn)緩存頁面效果的示例代碼
這篇文章主要介紹了keep-Alive搭配vue-router實現(xiàn)緩存頁面效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06