vue2.0 自定義組件的方法（vue組件的封裝）

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:13:17

vue2.0 自定義組件的方法（vue組件的封裝）

vue2.0 自定義組件的方法（vue組件的封裝）:一、前言之前的博客聊過(guò) vue2.0和react的技術(shù)選型；聊過(guò)vue的axios封裝和vuex使用。今天簡(jiǎn)單聊聊 vue 組件的封裝。 vue 的ui框架現(xiàn)在是很多的，但是鑒于移動(dòng)設(shè)備的復(fù)雜性，兼容性問(wèn)題突出。像 Mint-UI 等說(shuō)實(shí)話很不錯(cuò)了，但是坑也是不少，而且很多功能也是僅

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀vue2.0 自定義組件的方法（vue組件的封裝）:一、前言之前的博客聊過(guò) vue2.0和react的技術(shù)選型；聊過(guò)vue的axios封裝和vuex使用。今天簡(jiǎn)單聊聊 vue 組件的封裝。 vue 的ui框架現(xiàn)在是很多的，但是鑒于移動(dòng)設(shè)備的復(fù)雜性，兼容性問(wèn)題突出。像 Mint-UI 等說(shuō)實(shí)話很不錯(cuò)了，但是坑也是不少，而且很多功能也是僅

一、前言

之前的博客聊過(guò) vue2.0和react的技術(shù)選型；聊過(guò)vue的axios封裝和vuex使用。今天簡(jiǎn)單聊聊 vue 組件的封裝。

vue 的ui框架現(xiàn)在是很多的，但是鑒于移動(dòng)設(shè)備的復(fù)雜性，兼容性問(wèn)題突出。像 Mint-UI 等說(shuō)實(shí)話很不錯(cuò)了，但是坑也是不少，而且很多功能也是僅憑這些實(shí)現(xiàn)不了，這需要我們?nèi)シ庋b自己的可復(fù)用組件

二、封裝組件的步驟

1. 建立組件的模板，先把架子搭起來(lái)，寫(xiě)寫(xiě)樣式，考慮你的組件的基本邏輯。

os：思考1小時(shí)，碼碼10分鐘，程序猿的準(zhǔn)則。

2. 準(zhǔn)備組件的好數(shù)據(jù)輸入。即分析好邏輯，定好 props 里面的數(shù)據(jù)、類(lèi)型。(后面詳解)

3.準(zhǔn)備組件的好數(shù)據(jù)輸出。即根據(jù)組件邏輯，做好要暴露出來(lái)的方法。（后面詳解）

4.封裝完畢了，直接調(diào)用即可。

os：代碼可以不看，結(jié)論在文章最后

接下來(lái)以一個(gè)很簡(jiǎn)單的例子具體說(shuō)明一下

現(xiàn)在先看一下demo的效果圖

三、 demo代碼

父組件：

<template>
 <section class="f-mainPage">
 <!--selectFunc 選擇完成的回調(diào) searchList 下拉列表的數(shù)據(jù)-->
 <search @selectFunc="selectFunc" :searchList="searchList" :selectValue="selectValue"></search>
 </section>
</template>

<script type="text/ecmascript-6">
 import Search from '../vuePlugin/search'
 export default {
 data() {
 return {
 searchList: ['草船借箭', '大富翁', '測(cè)試數(shù)據(jù)'],
 // 直接通過(guò)props傳遞對(duì)象 修改，挺便捷的,但是不規(guī)范
 selectValue: {
 data: '1'
 },
 // 通過(guò)emit修改，規(guī)范寫(xiě)法
 selectValue2: ''
 }
 },
 mounted() {},
 methods: {
 pageGo(path) {
 this.$router.push('/' + path)
 },
 selectFunc(value) {
 this.selectValue2 = value
 console.log(this.selectValue)
 console.log(this.selectValue2)
 }
 },
 components: {
 Search
 }
 }
</script>

<style lang="scss" scoped>
.f-mainPage{
 width: 100%;
 .g-banner{
 width: 100%;
 background-image: url(../../../static/main_bg.png);
 background-repeat: no-repeat;
 background-size: 100% 100%;
 position: relative;
 overflow: hidden;
 color: white;
 text-align: center;
 p:nth-child(1) {
 margin: 10px auto 0px auto;
 font-size: 1.3rem;
 }
 .f-banscri {
 margin: 15px auto 8px auto;
 font-size: 0.95rem;
 }
 .f-moneyMax{
 margin: 5px auto 0px auto;
 font-size: 2.4rem;
 }
 .f-returnCash{
 width: 120px;
 height: 35px;
 text-align: center;
 line-height: 35px;
 background-color: white;
 color: #169BD5;
 display: inline-block;
 border-radius: 5px;
 font-size: 1rem;
 margin-top: 35px;
 position: relative;
 .f-mmmbd{
 position: absolute;
 width: 100%;
 height: 100%;
 background-color: transparent;
 top: 0;
 left: 0;
 }
 }
 }
 .g-cashInfor{
 width: 100%;
 text-align: center;
 display: flex;
 justify-content: space-between;
 div{
 width: 50%;
 height: 60px;
 line-height: 60px;
 box-sizing: border-box;
 }
 div:nth-child(1){
 border-bottom: 1px solid #878787;
 border-right: 1px solid #878787;
 }
 div:nth-child(2){
 border-bottom: 1px solid #878787;
 }
}
 .g-operate{
 width: 100%;
 height: auto;
 overflow: hidden;
 ul{
 list-style: none;
 padding: 0;
 margin: 0;
 font-size: 1.05rem;
 li{
 height: 60px;
 line-height: 60px;
 padding-left: 25px;
 position: relative;
 span{
 width: 20px;
 height: 20px;
 position: absolute;
 top: 20px;
 right: 20px; 
 background-image: url(../../../static/go.png);
 background-repeat: no-repeat;
 background-size: 100% 100%;
 }
 }
 }
 .f-goodNews{
 width: 340px;
 height: 144.5px;
 margin: 20px auto 30px auto;
 text-align: center;
 background-image: url(../../../static/banner.png);
 background-repeat: no-repeat;
 background-size: 100% 100%;
 }
 }
}
</style>

子組件：

<template>
 <div class="searchZJ">
 <div class="f-search">
 <div class="f-searchIn" v-bind:class="{searchInFous: this.fousFlag}">{{this.searchValue}}<span v-bind:class="{searchActive: this.searchFlag}" v-on:click="searchDown"></span></div>
 <div class="f-searchXl" v-if="this.dataHas" v-bind:style="{height:this.searchFous, border:this.searchBorder}">
 <div v-for="item in searchList" v-on:click="choseValue(item)">{{item}}</div>
 </div>
 <div class="f-searchXl" v-else >
 <div>暫無(wú)數(shù)據(jù)</div>
 </div>
 </div>
 </div>
</template>
<script type="text/ecmascript-6">
 export default {
 data() {
 return {
 data: [],
 dataHas: true,
 searchFlag: false,
 searchFous: '0',
 fousFlag: false,
 searchValue: '',
 searchBorder: 'none'
 }
 },
 props: {
 searchList: Array,
 selectValue: Object
 },
 mounted() {
 this.data = this.searchList
 },
 methods: {
 searchDown() {
 this.searchFlag === false ? this.searchFlag = true : this.searchFlag = false
 this.searchFous === '0' ? this.searchFous = 'auto' : this.searchFous = '0'
 this.searchBorder === 'none' ? this.searchBorder = '1px solid #D9D9D9' : this.searchBorder = 'none'
 this.fousFlag === false ? this.fousFlag = true : this.fousFlag = false
 },
 choseValue(value) {
 this.searchValue = value
 this.searchDown()
 this.selectValue.data = '我被修改了'
 this.$emit('selectFunc', value)
 }
 }
 }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
 .f-search{
 width: 250px;
 height: auto;
 position: relative;
 margin-left: 20px;
 box-sizing: border-box;
 }
 .f-searchIn{
 width: 250px;
 height: 35px;
 line-height: 35px;
 font-size: 0.95rem;
 border-radius: 5px;
 overflow: hidden;
 position: relative;
 background-color: white;
 box-shadow: none;
 box-sizing: border-box;
 color: #000000;
 padding-left: 10px;
 border: 1px solid #A3A3A3;
 }
 .searchInFous{
 border: 1px solid #57C4F6;
 box-shadow: 0px 0px 5px #57C4F6;
 }
 .f-searchIn > span{
 display: block;
 width: 28px;
 height: 28px;
 background-image: url(../../../static/upDown.png);
 background-size: 100% 100%;
 background-repeat: no-repeat;
 background-position: 0px -13px;
 position: absolute;
 top: 10px;
 right: 5px;
 }
 .f-searchIn .searchActive{
 background-position: 0px 12px;
 top: -2px;
 }
 .f-search .f-searchXl{
 position: absolute;
 width: 100%;
 height: auto;
 max-height: 220px;
 top: 41px;
 left: -1px;
 border-radius: 5px;
 /*border: 1px solid #D9D9D9;*/
 background-color: white;
 overflow-x: hidden;
 overflow-y: scroll;
 }
 .f-search .f-searchXl > div{
 height: 35px;
 line-height: 38px;
 color: #000000;
 padding-left: 25px;
 font-size: 0.92rem;
 }
 .f-search .f-searchXl > div:hover{
 background-color: #D5F1FD;
 }
</style>

四、代碼詳解

1. 先說(shuō)一下 props

我們?cè)诟附M件中需要將子組件需要的數(shù)據(jù)導(dǎo)入，用法如下：

<search @selectFunc="selectFunc" :searchList="searchList" :selectValue="selectValue"></search>

:searchList ="searchList" 就是我們的數(shù)據(jù)，這個(gè)可以寫(xiě)多個(gè)。這里我傳輸了2個(gè)參數(shù)過(guò)去，主要是做數(shù)據(jù)修改的說(shuō)明。大家可以先忽略。

在子組件中，我們的接收和使用方法如下：

props: {
 searchList: Array,
 selectValue: Object
 },
mounted() {
 this.data = this.searchList
 },

我們?cè)?props 中接收數(shù)據(jù)，注意props對(duì)象里面鍵值是對(duì)改數(shù)據(jù)的數(shù)據(jù)類(lèi)型的規(guī)定。做了規(guī)范，使用者就只能傳輸指定類(lèi)型的數(shù)據(jù)，否則報(bào)警告

二props對(duì)象中的數(shù)據(jù)，我們可以直接在當(dāng)前組件中使用 this.searchList，可以直接使用。至于原理嘛，不懂的可以取腦補(bǔ)一下 js的原型。os：這些基礎(chǔ)，在這就不做詳述了

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

vue2.0 自定義組件的方法（vue組件的封裝）

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽： VUE 自定義組件

熱門(mén)焦點(diǎn)

vue2.0 自定義組件的方法（vue組件的封裝）

vue2.0 自定義組件的方法（vue組件的封裝）

vue2.0 自定義組件的方法（vue組件的封裝）

最新推薦

猜你喜歡

熱門(mén)推薦