關於vue工作中遇到的小坑

前提項目是用腳手架工具生成的，項目用到的技術是vue webpack 和scss

1.引用定義組件的時候需要注意的點

import button  from '../../components/button/Button'  //在引用組件時，不要用html關鍵字作為名字，這樣在解析的時候它會當成html元素來解析，例如這里用了button，它會當做html的元素。

2.父組件中定義一個方法，讓子組件中的按鈕點擊的時候調用

父組件：

<buttonComponent   @commonalityBtn="ServiceList">{{ service }}</buttonComponent>　　

methods: {
  ServiceList () {
    router.push({
      name: 'search',
      params: this.ListParameter
    })
  }
子組件：

<button type="button" @click="commonality"><slot></slot></button>

methods: {
  commonality () {
    this.$emit('commonalityBtn')
  }
}

3.在vue文件里引入scss文件需注意的點

第一步引入scss文件：import styles from './land.scss'

第二步將styles變量配置在data里

data () {
  return {
    styles
  }
}

第三步使用樣式：<span :class="styles.list">選擇產品類別</span>

 

4.根據不同情況顯示不同樣式的時候需注意要寫在數組中例如：

:class="[{'seek' : shouldShow },{'find':should}]"

 5.vue實現手風琴（我的代碼前提是數據是從父組件傳入子組件的，點擊父組件的導航顯示子組件並實現手風琴）

　　父組件：

　　　　vue：

　　　　　　<selectionGroup v-for="(pulldow,index) in sortName" :childKey="pulldow,index,seq" @groupClick="groupClick"></selectionGroup>

　　　　js：

　　　　　　data () {

　　　　　　　　return {seq:0,}

　　　　　　}，methods{

　　　　　　　　groupClick(_index){

　　　　　　　　　　  this.seq=_index;

　　　　　　　　　　}

　　　　　　}

　　子組件：

　　　　css：

　　　　　　.groupBlock{display: block}

　　　　　.groupNone{display: none}

　　　　vue：

　　　　　　<li>
 　　　　　　 <span   @click="loadGroup()" class="panel-title">點擊查看內容<i class="accordion-title"></i></span>
 　　　　　　 <div  :id="index"  :class="[{'groupNone':index!=seq,'groupBlock':index==seq}]"></div>
　　　　　　</li>

　　　　js：

　　　　　　export default {

 　　　　　　 methods: {
     　　　　 loadGroup(){
         　　　　 this.$emit("testclick",this.index);
     　　　　 }
  　　　　　　},
 　　　　　　 props: {
   　　　　　　 childKey: {type: Object},
    　　　　　　index:{type:Number},
    　　　　　　seq:{type:Number}
 　　　　　　 },
　　　　　　}

　6.需求：點擊一下展開，點擊一下合上（前提界面所有的東西都是循環遍歷出來的，並且有多個tab卡，每個卡里有多個需要顯示隱藏的塊）（代碼前提：點擊的動作是在父組件中，展開收起的部分在子組件中）

子組件：
vue：

<div @click="toggle" class="group-title">
  <div>{{section.title}}</div>
</div>
<div v-show='shouldShow'>
　　<GroupChild :section='section'></GroupChild>
</div>
js:
export default {

  data(){
    return {
      shouldShow: false,
　　 }
　　},
　methods: {
　　toggle(){
　　　　this.shouldShow = !this.shouldShow;
　　}
　　

　　props: {
 　　 section: {
    　　type: Object
 　　 },
  　　isActive: {
    　　type: Boolean
  　　}
　　},

　　watch: {
  // 回顯：修改數據后展開，否則閉合
  isActive(val, oldVal) {
    if (val && this.section.isChange) {
      this.shouldShow = true;
    } else {
      this.shouldShow = false;
    }
  }
}

}

父組件：
　

<GroupItem v-for="section in item.sections" :section="section" :isActive="isActive"></GroupItem>

props: {

　　isActive: {
  　　type: Boolean
　　}
}

7.Vue中如何讓v-for循環出來的列表里面的click事件只對當前列表內元素有效

<li v-for='item in items' @click="toggle(item)">
　　<span v-show='item.show'>{{item.content}}</span>
</li>
toggle:function(item){
　　item.show=!item.show
}