vue组件笔记旧的在组件内用 <slot name="header"></slot>声明 ,组件外用 slot="hea

vue@2.6 v-slot 的使用

新旧基本使用比较

具名插槽

旧的在组件内用声明 ,组件外用 slot="header" 进行使用。

新的在组件内用声明 ,组件外用 v-slot:header 进行使用(#header 简写方式)。

作用域插槽（解决父组件访问子组件内部数据）

旧的在组件内用声明 ,组件外用进行使用。

新的在组件内用声明 ,组件外用 <template #header="slotProp">XXXXXXX{{ slotProp }}进行使用。

#default="slotProp" 表明没有用slot name.

#default=“value” 这个值可以进行解构，也可进行默认值设置

<current-user v-slot="{ user = { firstName: 'Guest' } }">>
  {{ user.firstName }}
</current-user>

详情

显示宽高相等的图片，宽度为屏幕宽度，高度与宽度相等

<div class="image-header">
  <img :src="food.image"/>
</div>

.image-header
    position: relative
    width:100%
    height: 0
    padding-top : 100%
    img
        position: absolute
        left: 0
        top: 0
        width: 100%
        height: 100%

重点是父元素的height设为0，padding-top设为100%

非父子组件传值 ☆

主要通过事件总线传值

在根节点给 Vue 挂载一个空的 Vue 对象

Vue.prototype.bus = new Vue();

需要发送事件的组件里

this.bus.$emit("change", params)

接收事件的组件

this.bus.$on("change", (msg) => {
    //do yourself work
})

动画结合 Animate.css

//引入 animate.css
<link rel="stylesheet" type="text/css" href="animate.css">

//布局
<transition enter-active-class="animated bounce" leave-active-class="animated shake">
	<p v-if="show">hello world</p>
</transition>
<button @click='toggleShow'>toggle</button>

要定义 enter-active-class 和 leave-active-class 的类名，且必须有 animated，想要什么动画效果就写在第二个位置上

解决第一次显示没有动画的bug

<transition 
	appear 
	enter-active-class="animated bounce" 
	leave-active-class="animated shake" 
	appear-active-class="animated bounce">
	<p v-if="show">hello world</p>
</transition>

在 <transition> 上添加 appear 和 appear-active-class 即可。

同时使用过渡和动画

<transition 
    name="fade"
    type='transition'
    appear 
    enter-active-class="animated bounce fade-enter-active" 
    leave-active-class="animated shake fade-leave-active" 
    appear-active-class="animated bounce">
    <p v-if="show">hello world</p>
</transition>

在 enter-active-class 和 leave-active-class 加上相应的类名 fade-enter-active 和 fade-leave-active ,然后在样式中定义过渡效果即可。

.fade-enter-active, .fade-leave-active{
	transition: opacity 2s
}
.fade-enter, .fade-leave-to{
	opacity: 0
}

动画执行的总时长是根据动画还是过渡来定呢？可以手动指定：

//指定整体动画时间为过渡动画时间
type='transition'

还可以自己指定动画总时长：

//指定动画时长为10秒
:duration="10000"

//分别指定进场时长5秒和出场动画时长10秒
:duration="{enter: 5000, leave: 10000}"

img 标签的 src 动态绑定

路径前加 require()

<img :src="bookingManageImg" slot="icon"/>

bookingManageImg(){
    return this.selectedTab === "bookingManage" ? 	require('../assets/manage_focus.png') : require('../assets/manage_normal.png')
},

vuex 在页面刷新后状态丢失解决办法

刷新页面后，存在 vuex 的数据会丢失，给调试带来不便。把用户的登录信息放到 sessionStorage 中避免丢失。

const USER_INFO = "userInfo";

export default new Vuex.Store({
  state: {
    userInfo: JSON.parse(sessionStorage.getItem(USER_INFO))
  },
  mutations: {
    setUserInfo(state, userInfo){
      //存储到 sessionStorage 中以防刷新页面后状态丢失
      sessionStorage.setItem(USER_INFO, JSON.stringify(userInfo));
      state.userInfo = userInfo
    }
  }
}

组件基本形式

Vue.prototype.$lang = $lang
Vue.component('lang', {
    render: function(h){
        return (<em domPropsInnerHTML="XXXXXXXX"></em>)
    }
})
Vue.directive('lang', {
    bind: function(el, binding){
        // 元素和后面的值
        el.innerHTML = binding.value
    },
    inserted: function(el, binding){
    },
    update: function(el, binding){},
    componentUpdated: function(el, binding){}
})

Vue 响应原理

把一个普通javascript 对象传给Vue 实例来作为它的data 选项，Vue 将遍历它的属性，用Object.defineProperty 将它们转为 getter/setter。

每个组件实例都有相应的watcher 程序实例，它会在组件渲染的过程中把属性记录依赖，当依赖项的setter 被调用时，会通知watcher 重新计算，从而致使它关联的组件得以更新。

所以，你直接vm.bb = '123' 这种是不响应的，（缺少一步转为getter/setter）Vue 不能检测到对象属性的添加或删除。

不能检测到对象属性的解决办法：

Vue.set(object, key, value)

this.$set(this.someObject, 'b', '2')

也可以创建一个新的对象，让它包含原对象的属性和新的属性：

// Object.assign(this.someObj, {a:1, b:2}) (这两个是有区别的) err

this.someObj = Object.assign({}, this.someObj, {a:1,b:2})

数组不能检测的解决办法：

当你直接设置一个项的索引时，例如： vm.items[indexOfItem] = newValue
当你修改数组长度，例如： vm.items.length = newLength

fix 1:

Vue.$set(example1.items, indexOfItem, newValue)

example1.items.splice(indexOfItem, 1, newValue)

fix 2:

example1.items.splice(newLengh)

监听组件的生命周期技巧 ☆

比如有父组件Parent 和子组件 Child, 如果父组件监听到子组件挂载mounted 就做一些逻辑处理，常规的写法：(缺点需要动两个父子组件)

// Parent.vue
<Child @mounted="dosometing" />

// Child.vue
mounted(){
    this.$emit('mounted')
}

这里提供一个更好用的方式，子组件不需要任何处理，只需在父组件引用的时候通过@hook 来监听即可。

<Child @hook:mounted="dosomething"  />

其他生命周期事件，依然可以

多属性多事件传递技巧

如果碰到属性较多时，需要一个个去传递，非常不友好且费时，有没有一次性传递的呢？

v-bind 和v-on

<template>
    <BaseList v-bind="$props" v-on="$listeners"> </BaseList>
</template>

实现属性传递

函数式组件（vue 性能优化）

函数式组件，即无状态，内部没有任何生命周期处理办法，轻量，特别适合用来只依赖外部数据传递而变化的组件。

函数式组件只是函数，所以渲染开销也低很多

在template 标签里面标明 functional
只接受 props 值
不需要 script 标签

vue 官方介绍：

cn.vuejs.org/v2/guide/re…

给事件传额外参数

原生Dom 事件绑定的函数的第一个参数都会是事件对象event,但是有时候我们想给这个函数传其他的参数，通常会这么处理 <div @click="clickDiv(params,$event)"></div>

当默认参数是多个的时候，可以这样：@current-change="(...defaultArgs) => treeclick(ortherArgs, ...defaultArgs)"

vue 单页情况，合理使用keep-alive，提高性能》

  <div>    <keep-alive>      <router-view v-if="$route.meta.keepAlive"></router-view>    </keep-alive>    <router-view v-if="!$route.meta.keepAlive"></router-view>  </div>

router

  {    path: '/',    name: 'index',    component: Index,    meta: {      keepAlive: true    }  }

3-5年内部岗位（平安、乐信、500万、vivo、oppo）推荐机会，欢迎发简历到： zgxie@126.com

遇到的进行整理。

vue组件笔记