Vue常用函数

240 阅读1分钟

组件通信

$emit

向父组件[老爹]派发事件

数据相关

vue.set

同种功能[this.$set] 一个全局一个非全局 向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。 使用方法: Vue.set(target, propertyName/index, value) vue.delete:同上

事件相关

vm.$on

监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的 额外参数

vm.$on('test', function (msg) { console.log(msg)})

vm.$emit

触发当前实例上的事件。附加参数都会传给监听器回调。 vm.$emit('test', 'hi')

vm.$once

监听一个自定义事件,但是只触发一次。一旦触发之后,监听器就会被移除。

vm.$off

如果没有提供参数,则移除所有的事件监听器; 如果只提供了事件,则移除该事件所有的监听器; 如果同时提供了事件与回调,则只移除这个回调的监听器。

vm.$off() // 移除所有的事件监听器
vm.$off('test') // 移除该事件所有的监听器 
vm.$off('test', callback) //只移除这个回调的监听器

组件或元素引用

ref和vm.$refs

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的 DOM 元素上使用,引用指向的就是DOM元素;如果用在子组件上,引用就指向组件 功能:提示框组件 注意: ref 是作为渲染结果被创建的,在初始渲染时不能访问它们 $refs 不是响应式的,不要试图用它在模板中做数据绑定 当v-for用于元素或组件时,引用信息将是包含 DOM 节点或组件实例的数组。

典型应用:

事件总线bus

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

通过在Vue原型上添加一个Vue实例作为事件总线,实现组件间相互通信,而且不受组件间关系的影响 这样做可以在任意组件中使用this.$bus 访问到该Vue实例 如何使用EventBus 一、初始化 首先需要创建事件总线并将其导出,以便其它模块可以使用或者监听它。我们可以通过两种方式来处理。先来看第一种,新创建一个 .js 文件,比如event-bus.js

// event-bus.js import Vue from 'vue' export const EventBus = new Vue()

实质上EventBus是一个不具备 DOM 的组件,它具有的仅仅只是它实例方法而已,因此它非常的轻便。 另外一种方式,可以直接在项目中的main.js初始化 EventBus :

// main.js Vue.prototype.$EventBus = new Vue()

全局Api

nexttick

dom更新之后执行一个回调 监听属性MutationObserver

指令APi

v-model

你可以用 v-model 指令在表单 input、textarea 及 select 元素上创建双向数据绑定。