1、父子組件間的傳值與vuex
起初,彈框的顯示我都用了vuex來實現,雖然可以實現但沒有真正發揮vuex是用處,屬於濫用了,直到大牛指點說vuex一般都用來處理接口請求回來的復用性高的數據,而不是什么都用vuex,彈框就直接使用父子之間的傳值就可以了(vuex--為了沒有直接關系的組件間的數據共享,用在調用接口上即可,不要濫用)。
① 父子組件間的傳值
父--子:父在子組件標簽里通過:xxx="xxx"的方式傳給子組件,子組件通過props接收,如若要改變接收過來的值就在計算屬性里改變而不直接改變props的值,改變的時候需要設置set(){};
子--父:通過$emit方法傳遞(雖然傳遞的是方法,但是是在父組件里監聽然后改變對應的值,可以看做是將操作控制權還給了父組件);$emit傳遞給父組件后,具體的值的改變寫在父組件里;
//父組件 <Button @click="handleShowSon">顯示子組件</Button> //@監聽子組件傳過來的方法,:給子組件傳值 <son @sonEmit=“onSonEmit" :showSon="showSon"></son> <script> export default{ data(){ return { showSon:false, } }, methods:{ handleShowSon(){ this.showSon=!this.showSon; }, //監聽到子組件傳過來的方法(知道子組件想要執行此操作了)就改變變量的值 onSonEmit(){ this.showSon=false; } } }
//子組件 <div v-show="sonShow">顯示出了子組件</div> <button @click="backFather">回到父組件</button> <script> export default { props:{ sonShow:Boolean }, methods:{ backFather(){ this.$emit('sonEmit')//將變量改變的控制權給了父組件里,在父組件的子組件標簽里監聽到然后寫方法來改變變量 } } }
父子間的傳值只要是能連接起來的組件間就用這個,父子、子父子都可以用,場景有彈框的顯示,彈框標題,點擊該行表格后數據的傳遞等。
② vuex,state里放共用數據,組件要改變state里的變量通過commit方法將改變權力給了mutations(類似$emit );actions和mutations類似,只是是通過dispatch方法激活,與mutations不同點在於可以處理異步操作;首先在需要用到變量的組件的計算屬性里獲取到變量來控制組件的渲染,反過來想改變該變量時就通過commit方法將控制權給了vuex,讓vuex來操作變量的改變。
2、富文本編輯器
使用的是wangeditor(還有simplemde、vue-simplemde、editor.md等);使用到的功能有文字的大小、是否加粗、上傳圖片、視頻以及撤銷按鈕、將編寫的文本內容提取成json格式。具體有哪些方法在
這里要將編輯框大小調整成手機屏幕大小,因為是插件只能修改其類下的樣式,注意要在App.vue里修改插件樣式才能生效,要加!important。
3、地圖
使用的是騰訊地圖,因為小程序客戶端使用的是騰訊地圖為了統一;放地圖的容器必須設置寬高才會顯示出來;https://blog.csdn.net/KLbluegreen/article/details/87184169 這是我學習騰訊地圖的筆記,具體代碼方法可以參考;在項目中沒有用到全部的api,只需要點擊地圖獲得地址信息即可,主要就是獲取了地址信息后,要將信息返回給父組件里,使用的父子間傳值實現的。
遇到的困難不是地圖的操作上,而是獲取到點擊點的信息的后續操作 --- 地區的選擇,要實現的效果是先根據地圖計算出選擇的省市區,然后還可以選擇配送的范圍是該區還是該市下的全部區:
大概思路:首先是從地圖彈框里獲取到數據,先渲染到頁面(父組件)里並傳入另一彈框(子組件),然后子組件進行選擇,是勾選全部(最后范圍是到市)還是勾選區(最后范圍是到區),再將選擇后的數據返回給父組件,父組件再根據返回是全部還是區再重新渲染。(我有點繞暈了)
具體:獲取到子組件地圖彈框傳過來的值,在父組件里分別獲取省市區,先連接成字符串,再分隔形成數組,賦值給數組變量(this.cityArr),在標簽里循環這個變量(父組件渲染);並將此變量傳給子組件省市區的選擇彈框,在子組件里進行選擇全部還是該區后將選擇結果傳回給父組件;此時若父組件直接修改之前渲染的數組變量,再打開省市區時數據也會跟着變,這里采用的是在模板渲染處進行限制,即如果選擇了全部就只渲染前兩項,若選擇了該區就都渲染出來。這樣頁面是完成了,但真的往后台傳數據時就會很麻煩,要重新判斷傳省市還是傳省市區了。
4、中間被檢查代碼時提出的問題
有添加編輯刪除燈交互行為需要有具體的數據操作與展示。按鈕樣式要統一。按鈕多的情況下,按鈕間要有間距,左右和上下。菜單收起來,要把每個菜單的圖標顯示出來,隨便找一些圖標先放上去。沒有說明什么知識點,只是記錄下正常是應該需要進行一次代碼檢查的,還有這些需要注意的點以后可以避免。
5、混入
vue文檔里有,將復用性高的js代碼寫在一個文件里,在組件里先引入js文件,然后在export default里配置,就可以在標簽直接使用其中的方法了。
import mixin from './mixin' import itemMixin from './item-mixin' export default { name: 'SideMenuItem', mixins: [ mixin, itemMixin ],//是混入的寫法 }
和直接在此處寫methods方法然后在標簽里調用一樣的效果。
6、數組方法
splice(index,n,arr),可替換、刪除,返回的是被刪除的項,所以應該重新獲取該數組,
arr=[1,2,3,4,5]; return arr.splice(1,1);//[2] arr;//[1,3,4,5]
split(),以什么分隔字符串從而形成數組;
concat(),將一個數組添加到另一個數組里;
pop(),刪除數組的最后一項。
7、插槽
組件可以使用插槽,但不能濫用;
可以具名插槽,<slot name="header"></slot>
使用的時候是在組件標簽里寫<template v-slot:header></template>。
有問題以及有錯誤請及時賜教
^_^