Vue中的那些酷炫操作全解析！一文读懂

使用Vue的人很多，也见过各种比较骚的操作，今天就来总结一下这些骚操作都是有多骚……(^ ^)

1、Vuex状态管理的替代品

开发过微信小程序的朋友肯定非常清楚，经常需要在全局app的globalData里面保存一些全局状态，但是这些状态存在一个问题就是并非是响应式的。那么在vue中，通常这个事情由vuex来接管，并且它还能自动驱动视图变化。可是很多时候由于项目老旧或者是人为等其他因素，没法使用vuex,甚至是觉得vuex也有些繁琐，此时不得不使用一些非常规但是很实用的操作。

• 中间商赚差价 所谓中间商赚差价，也就是说我们创建一个全新的Vue实例，这个实例不包含视图，仅仅包含各种状态以及事件监听等。你只需要通过导入这个中间商来帮你做状态存储和事件处理，又称event and data bus(haha):

  event.js

  import Vue from 'vue'
  export default new Vue({
    data(){
      return {
        user:{
          name:'tom'
        },
        article:{
          title:'hello vue'
        },
        //... 
      }
    },
    created(){
      this.$on(`name-change`,() => {
        console.log(`name change`);
      })
    },
    methods:{
      changeName(name){
        this.user.name = name
      }
    },
    beforeDestroy(){
      // todo off some event
    }
  })
  

  ComponentA.vue

  <template>
    <div>
      <h1 @click="changeName">{{name}}</h1>
    </div>
  </template>
  
  <script>
  import event from '../event.js'
  export default {
    data(){
      return {
      }
    },
    computed:{
      name(){
        return event.user.name
      }
    },
    methods:{
      changeName(){
        event.changeName(`lisi`)
        event.$emit(`name-change`)
      }
    }
  }
  </script>
  

• 指挥中心统一管控

  有时候，可能你觉得到处去引入或者这种方式不太方便，那么你还有第二种选择，构建统一指挥中心（provide & inject）:

  App.vue

  <template>
    <div id="app">
      <component-b></component-b>
    </div>
  </template>
  <script>
  export default {
    provide(){
      return {
        $app:this
      }
    },
    components:{
      'component-b':() => import('@/components/ComponentB.vue')
    },
    data(){
      return {
        title:'this is app'
      }
    },
    methods:{
      changeTitle(){
        this.title = this.title + `!!!`
      }
    }
  }
  </script>
  
  

  ComponentB.vue

  <template>
    <h1 @click="$app.changeTitle">{{$app.title}}</h1>
  </template>
  
  <script>
  export default {
    inject:['$app']
  }
  </script>
  

2、搞好上下级关系，保持沟通顺畅

啥鬼呀？搞个Vue还整这么一出，不然呢，标题都叫骚操作呢～～。日常开发中，可能经常有一个中间级别的小哥哥需要向上汇报工作，也可能需要向下传达指示，这个时候如果单纯采用prop & emit形式，有的时候可能真不太好弄，如果自己练就一身千里传音那该多好啊。好废话不多说，就给你弄两个函数，让你瞬间打通任督二脉：

苦逼的你：ComponentC.vue

<template>
<div>
  <button @click="wangwang">经理，你好</button>
  <button @click="gogo">今天加个班</button>
  <linmeimei></linmeimei>
</div>
</template>  
<script>
export default {
  components:{
    linmeimei:() => import('./LinMM.vue')
  },
  methods:{
    wangwang(){
      this.paiMapi('baba','wangwang','爸爸，你好')
      this.paiMapi('app','dalaoban','老板，你好')
    },
    gogo(){
      this.jiaGeBan(`linmeimei`,'boy','请你吃鸡')
    },
    // 加个班
    jiaGeBan(cname,eventName,data){
      // 既然要安排人加班，人必须要有一个名称吧
      this.$children.forEach(child => {
        const name = child.$options.name
        if(name === cname){
          child.$emit(eventName,data) // 执行下级的事件，下级可是需要随时待命哦，必须要$on接住才行
        }else{
          let jiaGeBanFn = this.jiaGeBan.bind(child)
          jiaGeBanFn(cname,eventName,data)
        }
      });

    },
    // 拍马屁
    paiMapi(cname,eventName,data){
      let p = this.$parent || this.$root
      let name = p.$options.name
      while(p && (!name || name !== cname)){
        p = p.$parent 
        if(p){
          name = p.$options.name
        }
      }
      if(p){
        p.$emit(eventName,data)
      }
    }
  }
}
</script>

经理& 大老板 parent.vue

<template>
  <div>
    <h2>this is parent</h2>
    <component-c></component-c>
  </div>
</template>

<script>
export default {
  name: "baba",
  created() {
    this.$on(`wangwang`, (data) => {
      console.log(`wangwang`, data);
    });
  },
  components:{
    'component-c':() => import('./ComponentC.vue')
  }
};
</script>

App.vue

<template>
  <div id="app">
    <component-p></component-p>
  </div>
</template>
<script>
export default {
  name:'app',
  created(){
    this.$on(`dalaoban`,data=>{
      console.log('我是大老板',data);
    })
  },
  components:{
    'component-p':() => import('@/components/Parent.vue'),
  },
  data(){
    return {
      title:'this is app'
    }
  },
  
}
</script>

林妹妹 linMM.vue

<template>
  <div>
    <h3>this is linmeimei</h3>
  </div>
</template>

<script>
export default {
  name:'linmeimei',
  created(){
    this.$on(`boy`,data=>{
      console.log(`boy`,data);
    })
  }
}
</script>

3、充分利用构造器，见缝插针

最近做了一些关于富文本的东西，需要往这个服务中间某些地方插入一些特定的自定义的模块，姑且叫它card吧，当然这个卡片不是纯展示的，而是类似组件有很多形式与交互，如果采用传统操作DOM的形式来做，似乎也可以，只是维护起来就很操蛋了。而骚一波后你还能愉快的使用vue呢。废话不多说，上代码：

post.vue

<template>
  <div>
    <div id="content" v-html="content"></div>
  </div>
</template>

<script>
import CardComponent from '../components/Card.js'
const html = `
  <div>
  
    这是一段富文本

    <div id="card1"></div>
    这是一段富文本
    这是一段富文本
    这是一段富文本

    <div id="card2"></div>
  </div>

`
export default {
  data(){
    return {
      content:html
    }
  },
  mounted(){
    console.log(`mounted`);
      const card1 = (new CardComponent({
        propsData:{
          index:1
        }
      })).$mount()
        
      const card2 = (new CardComponent({
        propsData:{
          index:Date.now()
        }
      })).$mount()

      document.getElementById('card1').appendChild(card1.$el)
      document.getElementById('card2').appendChild(card2.$el)
  }
}
</script>

<style>

</style>

Card.vue

<template>
  <div class="card">
    <h3>这是标题 {{index}}</h3>
    <button @click="doSomething">搞点事</button>
  </div>
</template>

<script>
export default {
  props:['index'],
  methods:{
    doSomething(){
      alert(this.index)
    }
  }
}
</script>

<style>

</style>

Card.js

import Vue from 'vue'
import Card from './Card.vue'
const CardComponent = Vue.extend(Card)

export default CardComponent

好，今天关于Vue的骚操作暂时写到这里，改天再接着补充，如果你也有一些骚操作，可以骚扰我一下哈～～希望你也被这点小骚年骚动一下哈