发表于 | 分类于

问题

在父组件中可以通过this.$validator.validateAll()来验证所有表单，但是却无法验证子组件中的表单。
它们的报错信息errors对象在各自的组件实例中。如果能让子组件直接使用父组件的验证方法就好了，这样子组件就能直接使用父组件的errors对象。

解决方法

使用依赖注入：

1
2
3
4
5
6
7
8
9
10
11
// Parent Component:
provide () {
    return { parentValidator: this.$validator }
},

// Child Component:
inject: [ 'parentValidator' ],
...
created () {
    this.$validator = this.parentValidator
}

发表于 | 分类于

问题

之前在工作中碰到个需求：前端点击按钮发送请求，后端返回 excel 文件的二进制流，并实现下载。

数据是请求成功了，但我在实现过程中碰到了以下两个问题：

  1. 下载的 excel 文件都是乱码的
  2. 浏览器控制台中能看到该请求的 Content-Disposition 响应头，但我在代码中无法获取到它，这样就无法得到 excel 的文件名了
阅读全文 »

发表于 | 分类于

问题

1
2
3
4
5
6
<el-autocomplete
  v-model="state"
  :fetch-suggestions="querySearchAsync"
  placeholder="请输入内容"
  @select="handleSelect"
></el-autocomplete>

这是 Element UI 官方文档中 el-autocomplete 的示例，而这里的 handleSelect 默认绑定的参数是你选中的那条数据。

但是如果你需求用 v-for 生成多个组件，要把 index 给传进这个方法，你可能会这样做：

@select="handleSelect(item, index)"

经试验这是行不通的，那么该如何做呢？

阅读全文 »

发表于 | 分类于

什么是 ORM 库

先说一下数据库，比如 MySQL 就是。我们可以使用现成的 MySQL 模块来操作数据库，但需要写 SQL 语句来操作数据库，比较麻烦。
所以就有人封装了 ORM 库，就像一个隔离层一样，我们只需要调用某个语法比如 Note.create()，它的底层就会自动生成对应的 SQL 语句。
而 Sequelize 就是一个 ORM 库。
另外，像 MongoDB 和 Mongoose 也是类似的关系。

安装并引入

安装

1
2
3
$ npm install --save sequelize
// 此处也可选择安装mysql或其他，本文以sqlite为例
$ npm install --save sqlite3

引入

1
2
const Sequelize = require('sequelize')
const path = require('path')

建立数据库

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const sequelize = new Sequelize('database', 'username', 'password', {  // 这三个参数也可填 undefined
  host: 'localhost',    // 数据库地址
  dialect: 'sqlite',    // 数据库类型

  pool: {
    max: 5,             // 连接池最大连接数量
    min: 0,             // 连接池最小连接数量
    acquire: 30000,     // 在抛出错误前尝试连接的最大时间为30秒
    idle: 10000         // 如果一个线程超过10秒钟没有被使用过就释放该线程
  },

  // 只有用 SQLite 时要配置此项
  storage: path.join(__dirname, '../database/database.sqlite')  // 假如该目录下没有该文件，会自动创建
});

测试连接

1
2
3
4
5
6
7
8
sequelize
  .authenticate()
  .then(() => {
    console.log('Connection has been established successfully.');
  })
  .catch(err => {
    console.error('Unable to connect to the database:', err);
  });

运行该文件node test.js，连接成功则会 log 成功。

创建 Model

1
2
3
4
5
6
7
8
9
10
11
12
13
// 创建 Model
const Note = sequelize.define('note', {  // 表名为 note
  text: {    // 字段名
    type: Sequelize.STRING    // 字段类型
  }
})

// 创建或同步表
// User.sync() 会返回一个 Promise 对象
// force = true 时会把存在的表先 drop 掉再创建
Note.sync({force: true})

// 现在就可以增删改查了

增删改查

1
2
3
4
5
6
7
8
9
// 增
Note.create({
    text: 'hello'
})

// 查
Note.findAll({raw: true, where: {id: 1}}).then(notes => {
    console.log(notes)
})

小结

至此，一个基本的数据库就完成了。更多用法还是得参考 Sequelize 的官方文档。

发表于 | 分类于

疑问

最近看到一道面试题，如下：

1
2
3
4
5
6
7
var vm = new Vue({
  data: {
    items: [1, 2, 3]
  }
})
vm.items[1] = 'x'
vm.items.length = 2

这样写有什么问题？那应该怎么写？

我看到这道题时并不觉得有什么问题。在Vue中，一旦响应式数据发生改变，setter 不是会发通知给 watcher 吗？

阅读全文 »

发表于 | 分类于

前言

最近发现之前学的有些知识点都忘了…还是记博客吧。

作用域插槽

一个组件中有一个插槽，我们在插槽里写一个div，那么这个div就会被渲染到这个组件里，但是这个div又想调用这个组件里的数据或方法，那怎么办呢？我们可以加一个变量，把它带进插槽中。
简单来说：作用域插槽是一个带绑定数据的插槽。

阅读全文 »

发表于 | 分类于

前言

搞懂 Event Loop 花了我挺长时间的，提示本文较长，阅读需有耐心。

由于JavaScript是单线程的，当有两个任务执行时后一个必须等前一个执行完成后才能执行，所以JavaScript会将任务分为两类，同步任务 和 异步任务（异步任务其实还可以分为 宏任务 与 微任务，这个后面会提）。
异步任务肯定是在同步任务之后的，但是异步任务之间又是怎么样的一个顺序呢，比如多个setTimeout事件又是怎么样一个执行顺序？这就涉及到事件循环：Event Loop。
另外，浏览器和NodeJS的事件循环是不一样的。

基本概念

首先来讲清楚前言中的两个概念。

  1. 同步任务：指的是当前在执行栈（主线程）中运行的任务。只有当前一个任务执行完，下一个任务才会接着执行，不管前一个任务执行需要多久。
  2. 异步任务：暂时不进入执行栈，而是先放到任务队列中。当执行栈的任务执行完并清空后，才会取出任务队列中的任务到执行栈中去执行。

JavaScript是单线程的。假如一个操作需花费很长时间，那么此时浏览器就会一直等待这个操作完成，就会造成不好的体验。因此，JS里有同步任务与异步任务，这样就避免了页面堵塞。

那么 JS 引擎怎么知道异步任务有没有结果，能不能进入主线程呢？答案就是引擎在不停地检查，一遍又一遍，只要同步任务执行完了，引擎就会去检查那些挂起来的异步任务，是不是可以进入执行栈了。这种循环检查的机制，就叫做事件循环（Event Loop）。

浏览器环境下的 Event Loop

我们来看一下这段代码：

阅读全文 »

发表于 | 分类于

起因

在编写仿CNode社区项目中，点击router-link，地址栏中的地址已经改变了，然而并没有跳转路由，故记此博客。

原因

在我的 Article 组件中，点击侧边栏的文章，却没有跳转页面。
原来是因为，虽然地址栏的地址变化了，但实际上只有参数发生了改变（从/topic/a变化到/topic/b），这样的话原来的组件实例会被复用，组件的生命周期钩子不会再被调用。因为渲染的是同一个组件，比起销毁再创建，复用更高效。

解决

用watch选项监测$route变化：

阅读全文 »

发表于 | 分类于

前言

我在 轱辘UI 项目做 tabs 组件时，该组件有父子组件通讯的需求，然而多个子组件之间怎么通讯呢？我了解到可以用 EventBus 结合 依赖注入 来解决。

什么是EventBus

即组件共用的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件。

如何在父子组件中使用EventBus

父组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
export default {
    data(){
        return {
            eventBus: new Vue()
        }
    },
    provide() {
        return {
            eventBus: this.eventBus
        }
    },
    mounted() {
        this.eventBus.$emit('event', () => {

        })
    }
}

阅读全文 »