vue2.0 如何自定義組件（vue組件的封裝）

1、前言

    以前的博客聊過 vue2.0和react的技術選型；聊過vue的axios封裝和vuex使用。今天簡單聊聊 vue 組件的封裝。

    vue 的ui框架如今是不少的，可是鑑於移動設備的複雜性，兼容性問題突出。像 Mint-UI 等說實話已經很不錯了，可是坑也是很多，並且項目中不少功能僅憑這些也實現不了，這須要咱們去封裝本身的可複用組件。

 

2、封裝組件的步驟

　　1.  創建組件的模板，先把架子搭起來，寫寫樣式，考慮好組件的基本邏輯。　　　　os：思考1小時，碼碼10分鐘，程序猿的準則。

　　2.  準備好組件的數據輸入。即分析好邏輯，定好 props 裏面的數據、類型。(後面詳解)

　　3.  準備好組件的數據輸出。即根據組件邏輯，作好要暴露出來的方法。（後面詳解）

　　4.  封裝完畢了，直接調用便可。

 

  接下來以一個很簡單的例子具體說明一下

  如今先看一下demo的效果圖

 

3、代碼詳解

　　1. 先說一下 props

　　　　咱們在父組件中須要將子組件須要的數據導入，用法以下：

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

　　　　:searchList="searchList"  就是咱們的數據，這個能夠寫多個。這裏我傳輸了2個參數過去，主要是作數據修改的說明。你們能夠先忽略。

 

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

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

　　　　咱們在 props 中接收數據，注意props對象裏面 鍵值 是對改數據的 數據類型 的規定。作了規範，使用者就只能傳輸指定類型的數據，不然報警告

　　　　而props對象中的數據，咱們能夠直接在當前組件中使用  this.searchList，能夠直接使用。這裏要強調一下，props傳過來的數據只作展現，不得修改，想修改，再新寫一個data中的變量承接作數據的再處理。至於緣由，同上，能夠看一下js的原型。至於原理嘛，不懂的能夠取腦補一下 js的原型 。　　　　os：這些基礎，在這就不作詳述了。

　　　　以上就是props傳遞過來的數據的使用了。

 

　　2. emit的使用(如何暴露組件方法)

　　　　咱們已經會使用 父組件向子組件傳數據了，那如子組件如何來修改父組件的數據呢？

　　　　這裏提供 2 種實現方法，可是 第一種不推薦，強烈不推薦

　　　　方式一：

 

　　　　　selectValue: {
          data: '1'
        },
　　　　。。。。。。。。。。。。。。。

　　　　 this.selectValue.data = '我被修改了'

 

　　　　即，父組件將 對象 數據傳遞給子組件，子組件直接修改props過來的對象的值

　　　　能夠實現，感受是一個比較快捷的方式。可是不推薦，這種方式寫多了，容易出錯，特別是多層組件嵌套的時候。這種修改對代碼的迭代和錯誤的捕捉都不友好，因此建議你們別這樣寫。

　　　　他的實現原理簡單提一下： 這個對象、數組啦，是引用數據類型，說白了，就是存儲單元的信息是指針，真正數據在別的地方，經過指針查詢的數據，因此這樣寫，對瀏覽器來講僅僅是傳遞了一個指針，數據仍是同一份數據。因此你能修改。

　　方式二：

　　　　正兒八經的經過 $emit 方法去掉父組件的方法，在父組件中修改data的數據。（根正苗紅的方法，規範寫法）

// 子組件 this.$emit('selectFunc', value) // 父組件 <search @selectFunc="selectFunc" :searchList="searchList" :selectValue="selectValue"></search> selectFunc(value) { this.selectValue2 = value console.log(this.selectValue) console.log(this.selectValue2) }

　　　　將父組件的方法注入子組件  @selectFunc="selectFunc" ，而後在子組件中經過 $emit 調用他，並傳遞參數。達到修改的目的。

 

4、 demo代碼

父組件：

<template> <section class="f-mainPage"> <!--selectFunc 選擇完成的回調 searchList 下拉列表的數據--> <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: ['草船借箭', '大富翁', '測試數據'], // 直接經過props傳遞對象 修改，挺便捷的,可是不規範  selectValue: { data: '1' }, // 經過emit修改，規範寫法  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>暫無數據</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>

 

 

5、 總結

　　這裏主要是總結一下vue組件封裝的思路，幫你們梳理一下。很簡單，和jQuery插件、react組件同樣，全部組件都是一個套路，就是 函數思想。

　　組件就是臺作烤腸的機器，我放進去豬肉，再按一下各類開關，而後你給我烤腸。

　　　　1. 定義好 你須要使用者傳入的數據

　　　　2. 定義好 你提供給使用者的方法

　　　　3. 寫好組件的內部邏輯

　　這就OK了，一個完美的，可複用的組件就完成了。    os： 在此吐槽一下，那些自認爲是優秀的組件，其實，別人拿着是無法用的。 o(╥﹏╥)o 

　　os： 願你們工做過程當中能規範編程習慣，一塊兒爲前端代碼大社區作貢獻。

 

注：

  os:  2018/06/06

　　鑑於一些朋友的評論，我在這再作一些解答哈，這個言論往深了去不保證準確性，我儘可能吧。有問題的地方仍是但願你們及時指出。

　　1.  父子組件通訊的方式，遠不止我說的那兩種。可是，經過 $emit 的方式是根正苗紅的，不帶任何差錯的，是封裝優秀組件最好的方式()

　　（1） 經過ref 通訊

　　　　　　父組件設置ref，經過$refs對象來獲取子組件的數據

　　

<search ref="refTest3" ></search> ....... console.log(this.$refs.refTest3) console.log(this.$refs.refTest3.selectValue.data)

 

　　　　　　  其實，很簡單。ref 就是直接獲取了你的dom節點，若是是div一類的基本dom和js的document.getElementsByTagName()效果同樣的，並且這樣節省開銷。你能夠在父組件中直接 this.$refs.refTest3.selectValue.data。直接獲取子組件data中的數據，或者別的數據均可以獲取。可是，這個不是咱們封裝組件會用的東西，由於這個用在父組件。組件的思想是 獨立的。因此，你們平時用用就行了，若是要封裝可複用的組件，這個仍是不實用的。  os：可能他有特殊用法是我不清楚的，若是有請你們分享

　　（2）經過 vuex 通訊

　　　　　　vuex 你們都知道，變量統一管理(方便的很)，╮(╯▽╰)╭  可是用這個來封裝組件的徹底就是擡槓了。vuex、redux等等這些都是針對組件多層傳輸數據不便，而作的狀態統一管理，說白了是針對你們都要用的數據纔會放到vuex中，而組件思想，是封裝一個獨立的、可複用的功能模塊。這根本就是2個理念。但願你們不要被誤導。

　   （3）.aync 父子組件數據雙向綁定

 

 　　　　　　 說實話，這也是來擡槓的。說白了，雙向綁定不仍是 經過  $emit 監聽數據更新事件，來調用父組件的方法嗎？

　　　　　　 這裏簡單說一下這個數據雙向綁定的，仍是很經常使用的方法。不囉嗦，看代碼：

<search @selectFunc="selectFunc" :syncTest.sync="syncTest"></search> ......... this.$emit('update:syncTest', value)

　　　　　　其實，很簡單。在父組件向子組件props數據的時候，加一個  .sync  修飾符，而後在子組件顯示的調用 emit 來修改他。   說白了就是添加這樣的一個事件綁定  @update:foo="val => bar = val">

　　　　　　上述的方法就是  父子組件數據雙向綁定。子組件實時修改  props 的方法。

 

　　　　歡迎你們提出別的問題和建議