关于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}]"
:class="{'seek' : shouldShow,find:should}"
:style="{'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
}

　8.子父元素都有点击事件时如何不相互干扰

    <div  @click="parentClick">

　　　　<div @click.stop="childClick"><div>   

　</div> 

 9.频繁切换用v-show,很少改变用v-if

     v-if初始化时不渲染，条件满足时渲染，有更高的切换开销

     v-show初始化时渲染，有更高的初始化开销，条件满足时，只是改变了display的值