VUE

136 阅读1分钟

目录

  • 懒加载 component: resolve => require(['@/views/enterPage/enter.vue'], resolve)
  • router this.$router.replace
  • mixin
  • set
  • slot name slot="name"

slot

* template
<template>
  <div class="deliverItem">
    <span v-if="imgUrl" class="img" :style="{backgroundImage:'url('+imgUrl+')'}"></span>
    <slot v-else name="con"></slot>
    <div class="deliverItemCon">
      <slot name="oper"></slot>
    </div>
  </div>
</template>

* html
<deliverItemComp>
	<div slot="con" class="imgWrap">
	  <span :style="{backgroundImage:'url('+$tools.def.ossImg+'/img.jpg'+')'}"></span>
	</div>
	<div slot="oper" class="operSlot loadOper">
	  <h3>55 <i class="icon icon-load"></i></h3>
	</div>
</deliverItemComp>

$set

this.$set(this.oLists, `oList${el.code}`, {list: [], next: true, curr: 1, loading: false, len: 0 })

懒加载

export default {
  path: '/enter',
  name: 'enter', // 输入页
  component: resolve => require(['@/views/enterPage/enter.vue'], resolve)
}

$router

    this.$router.replace({path: 'path', query})

Vue.mixin

mixin执行多次

Vue.mixin() 会多次执行原因
	原理是以src/main.js为模板,因此每个入口文件都会复制Vue.mixin(mixin),导致了Vue.mixin(mixin)语句执行了多次
	建议是不以 main.js 为模板,而是直接定义模板字符
mixin不能放于main.js入口(entry.js)
[学习来源_在 src/main.js 中使用 Vue.mixin() 会多次执行](https://github.com/F-loat/mpvue-entry/issues/8)

mixin混入对象和Vuex的区别

- Vuex是状态共享管理,所以Vuex中的所有变量和方法都是可以读取和更改并相互影响的;
- mixin可以定义公用的变量或方法,但是mixin中的数据是不共享的,也就是每个组件中的mixin实例都是不一样的,都是单独存在的个体,不存在相互影响的;
- mixin混入对象值为函数的同名函数选项将会进行递归合并为数组,两个函数都会执行,只不过先执行mixin中的同名函数;
- mixin混入对象值为对象的同名对象将会进行替换,都优先执行组件内的同名对象,也就是组件内的同名对象将mixin混入对象的同名对象进行覆盖;
[学习来源_mixin混入对象和Vuex的区别](https://www.cnblogs.com/dengyao-blogs/p/11589962.html)