Vue实用操作记录

动态切换组件

<component v-bind:is="引入组件后的组件名"></component>
// 修改is后的值这样就能动态切换组件了，在切换的组件很多时，比较方便。

 keep-alive

<keep-alive :include="['ProAdminContract']">
          <router-view :key="key" />
</keep-alive>
// include 允许缓存的组件(白名单)，先匹配组件name，后匹配路由中的name
// exclude 拒绝缓存的组件（黑名单）

keep-alive会让它的子组件被缓存，常用于组件频繁切换时节省资源，路由标签页内跳转后返回的时候保留组件不使用原来的生命周期，变更为activated 和 deactivated生命周期，组件切换时使用activated,第一次进入有keep-alive的组件时，触发created→mounted→activated，这组件退出时才会使用deactivated

 

vue项目中 webpack在node中报错 

Starting development server...
98% after emitting CopyPlugin

卡98%的可能是在vue-router里写过动态路由为component: ()=> import('')

　另外

只要Vue中有数据没有写完比如导入插件或者加载配置之类等等的信息没有写完或者有地方是空着的项目就起不来

 

 

vue中name属性的作用

 

用于显式声明组件展示时的名称。

 

• 类型

  interface ComponentOptions {
    name?: string
  }
  

• 详细信息

  组件的名字有以下用途：

  • 在组件自己的模板中递归引用自己时
  • 在 Vue 开发者工具中的组件树显示时
  • 在组件抛出的警告追踪栈信息中显示时

  当你在使用单文件组件时，组件已经会根据其文件名推导出其名称。举例来说，一个名为 MyComponent.vue 的文件会推导出显示名称为“MyComponent”。

  另一种场景是当一个组件通过 app.component 被全局注册时，这个全局 ID 就自动被设为了其名称。

  使用 name 选项使你可以覆盖推导出的名称，或是在没有推导出名字时显式提供一个。(例如没有使用构建工具时，或是一个内联的非 SFC 式的组件)

  有一种场景下 name 必须是已显式声明的：即 <KeepAlive> 通过其 include / exclude prop 来匹配其需要缓存的组件时。

 

怎么在工具函数中操作组件的data

使用场景，当vue中有大量的methods函数，维护和阅读出问题

1. 使用vue的mixins混入新的methods，用起来不太好，本质上还是增加了大量methods

2. 写入vuex，不好维护，非常麻烦。

3. 硬是给工具函数传参

import utilsTool1 from '@/utils/utilsTool1';
methods: {
    fn() {
      this.a = utilsTool1(this.a);
    },
}
// 虽然清晰，但问题是传入基本类型不能引用，所以不可以直接修改

　

那怎么解决好些？

使用.bind(this)

function utilsTool1() {
  this.a = this.a + this.a;
}

export default utilsTool1;
组件中：

import utilsTool1 from '@/utils/utilsTool1';
methods: {
    fn() {
      utilsTool1.bind(this)();
      console.log(this.a);
    },
}

　　因为传入了绑定的this，所以可以直接使用，不用考虑太多，没有数据类型，值引用的问题，使用别忘了写.bind(this)