vue2.x使用总结（可复用性篇）

使用发布订阅模式

自己写发布订阅模式代码

使用发布订阅模式来处理非父子组件之间的通信

vue中的发布订阅

main.js

Vue.prototype.$center = new Vue();

one.vue

methods: {
    addAction(){
      // 派发事件
      // Bus.$emit('send', this.value);
      this.$center.$emit('send', this.value);

      this.value = '';
    }
  }

two.vue

  methods: {
    listener(data){
      console.log('订阅了：', data);
      this.list.push(data);
    }
  },
  created(){
    // 添加监听
    this.$center.$on('send', this.listener);
  },
  beforeDestroy(){
    //移除监听，防止内存泄漏
    this.$center.$off('send', this.listener);
  }

ref 的使用

ref是组件内的dom中的唯一标识符
给普通标签设置，获得是dom元素
给组件标签设置，获得是组件对象

 <div ref="box" class="box"></div>
 <Two ref="two"/>

通过refs获得组件对象后，可以操作组件的属性也可以调用方法

this.$refs.one.title = this.$refs.input.value;

slot

solt的基本使用

slot是一个插槽，可以获得组件在外部当成标签调用时，标签包裹的内容

slot位置在哪里，接收的内容就显示在哪里

slot可以设置名字，设置了名字的slot接收相对于的模版。没有名字slot接收没有设置slot名字的模版

App.vue

  <Wrap>
    <span>test</span>
    <h1 slot="h1">test</h1>
    <h6 slot="h6">test</h6>
    <Box/>
  </Wrap>

Wrap.vue

<div class="wrap">
  <slot name="h1"/>
  <h1>wrap</h1>
  <slot name="h6"/>
  <slot/>
</div>

solt的组件通信

组件的关系判断：
看这个标签被什么组件使用了，就是谁的子组件，而不是看是被谁包裹

方式1：
父子关系组件：
参考方法前一天笔记
非父子关系组件：
使用发布订阅模式来进行组件间的通信

方式2：
$children和$parent
它可以直接获得其子节点/父节点（非组件）

当子节点被点击时，遍历每一个child
判断是否是点击的这个child，是，就设置isActive=true，不是，就设置为false

     this.$children.forEach((child, index)=>{
       if(index === flag){//选中
         child.isActive = true;
       }else{//不选中
         child.isActive = false;
       }
     })

      // 调用了父节点的方法,取消所有选中
     this.$parent.selectTabByIndexAction(this.index);

vue插件

如果需要写一个vue的插件。
就向外输出一个对象
这个对象必须要有一个方法,方法名为install
外面调用插件，Vue.use(插件模块)
内部install方法就会执行\

全部引入写法
plugin/index.js

import tabs from './van-tabs.vue'
import tab from './van-tab.vue'
export default {
 install(Vue){
   console.log('install方法执行了....');
   Vue.component(tabs.name, tabs);
   Vue.component(tab.name, tab);
 }
}

main.js

import plugin from './plugin'
Vue.use(plugin);

按需应用写法：
plugin/index.js

 export const Tabs = {
  install(Vue){
    Vue.component(tabs.name, tabs);
  }
};

export const Tab  = {
  install(Vue){
    Vue.component(tab.name, tab);
  }
};

App.vue

import {Tabs, Tab} from './plugin'
import Vue from 'vue'
Vue.use(Tabs).use(Tab); //链式写法引入

两种写法可以同时写，用户使用时就可以按需引用

动画

自定义name，就可以在多个组件中区分开来执行动画

  class名字会发生变化
    v-enter         [name]-enter
    v-enter-to      [name]-enter-to
    v-enter-active  [name]-enter-active

    v-leave         [name]-leave
    v-leave-to      [name]-leave-to
    v-leave-active  [name]-leave-active 

使用第三方库类时

 直接设置动画的class名字
    enter-class   就是修改v-enter
    enter-to-class   就是修改v-enter-to
    enter-active-class   就是修改v-enter-active
    leave-class   就是修改v-leave
    leave-to-class   就是修改v-leave-to
    leave-active-class   就是修改v-leave-active

  <!-- <transition enter-class="a" enter-to-class="b" enter-active-class="c"> -->
  
  
    <transition enter-active-class="bounce"
    leave-active-class="hinge">
        <div class="box" v-if="isShow">
          我要出来的内容
        </div>
    </transition>

设置动画执行模式

mode="out-in"
...
更多请看官方文档

一个开关，isShow控制多组标签显示隐藏。

多组标签需要执行同一个动画,使用transition-group

自定义指令

全局指令

自定义指令格式：
和组件写法类似
Vue.component(‘组件名字’, 组件的内容);
Vue.directive(‘指令名字’, 指令的内容);

在main.js中定义指令
外部调用指令:
v-name:arg.modifier.modifier…=“expression”

<div v-innter-text:title.a.b="1+2+3"></div>

定义指令：

Vue.directive('innter-text', (el, info)=>{
  // info.value  是指令的值
  // info.expression  是指令的表达式
  // info.arg  是指令的参数
  // info.modifiers  是指令的修饰符
  // info.name  是指令的名字
  // info.rawname  是指令在外部调用的名字
  el.innerText = info.value;
});

局部指令

export default {
  // 局部指令
  directives: {
    'inner-html'(el, info){
      el.innerHTML = info.value;
    }
  }
  ...
}

自定义过滤器

自定义过滤器格式：
和组件写法类似
Vue.component(‘组件名字’, 组件的内容);
Vue.directive(‘指令名字’, 指令的内容);
Vue.filter(‘过滤器的名字’, 过滤器的内容);

过滤器功能，不会操作原始数据，是有显示在页面上的数据会发生变化
只有在 v-text v-bind {{}} 可以使用

全局过滤器

main.js

Vue.filter('even', (value)=>{
  console.log('过滤器执行了');
  
  return value.filter(item=>!(item%2));
 
})

局部过滤器

export default {
  // 局部过滤器
  filters: {
    'currency'(value){
      // return '¥'+value
      return '$' + (value / 7).toFixed(2);
    }
  },
...
}

调用过滤器，展示的是过滤器函数执行的结果

  <p>{{list | even }}</p>
  <p>{{ arr | odd }}</p>

  <p>{{ arr | arrFilter('odd') }}</p>
  <p>{{ arr | arrFilter('even') }}</p>

vue中请求数据

使用axios

跨域请求处理方法：
在vue中自己配置正向代理

vue.config.js

  devServer: {
    // 配置项目的正向代理
    proxy: {//http-proxy-middleware
      '/api': {
        target: 'http://localhost:9000',
        changeOrigin: true
      }
    }
  }

$nextTick

钩子函数 updata 方法：
data,props,computed 任意一个值发生变化，都执行

有时候我们需要特定的数据发生了变化，再执行事件\

在需要监听的数据 修改方法下 执行 $nextTick

接收data数据的上一次修改，进行监听dom的变化，dom都更新完了，才调用回调。

数据修改和$nextTick之间不要写代码

这里是监听轮播数据发生改变后在执行创建swper

    this.$nextTick(()=>{
        console.log('$nextTick');
          const swiper = new Swiper(this.$refs.swiper, {
            pagination: {
              el: '.swiper-pagination',
            }
        });
      });

数据变化后的执行顺序：

数据变化后， watch —> beforeUpdate ----> 更新dom ----> updated ----> $nextTick

组件上非props 属性绑定

官网传送: link.

在组件上绑定非props属性，默认绑定到组件最外层元素上面，通过使用 inheritAttrs: false,
禁用继承，在组件内需要继承到的元素上v-bind="$attrs"，自定义选择要继承到的元素：

<myInput placeholder="请填写email" />

myInput.vue

<div>  //默认会继承要这层元素上
	<input v-bind="$attrs" />  
</div>

//...
data(){
//...
},
inheritAttrs: false