Vue.js入门(四):常用API

1 数据类API
Vue.set

向响应式对象中添加一个 属性,并确保这个新 属性 同样是响应式的,且触发视图更新。
使用this.myObject.newProperty = 'hi'这种方式添加的属性不会被Vue检测到,因此不会触发视图更新。

Vue.set(target, propertyName/index, value)
Vue.delete

删除对象的 属性。如果对象是响应式的,确保删除能触发更新视图。
使用delete obj['property']这种方式删除属性不能被Vue检测到,因此不会触发视图更新。

Vue.delete(target, propertyName/index)

以上两种方法 的别名:vm.$set()vm.$delete()

2 事件相关API
vm.$on

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

vm.$on( event, callback )

其实等同于在Vue模板上使用@event = callback

vm.$emit

触发当前实例上的事件。附加参数都会传给监听器回调。

vm.$emit( eventName, […args] )
vm.$once

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

vm.$once( event, callback )
vm.$off

移除自定义事件监听器,有三种传参方式

vm.$off()  // 没有提供参数,则移除所有的事件监听器
vm.$off(event)   // 只提供了事件,则移除该事件所有的监听器
vm.$off(event, callback)   //同时提供了事件与回调,则只移除这个回调的监听器
事件总线

(总线设计模式)通过在Vue原型上添加一个Vue实例作为事件总线,作为中间人实现组件间相互通信,而不受组件间关系的影响:

Vue.prototype.$bus = new Vue();  //这样做可以在任意组件中使用`this.$bus`访问到该Vue实例
3 节点引用
ref 和 vm.$refs

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例

<!-- 在普通的DOM元素上使用 -->
<input ref="input">
...
this.$refs.input.focus()

<!-- 在子组件上使用 -->
<base-input ref="usernameInput"></base-input>
...
this.$refs.usernameInput.focus()

注意:

  • 因为ref本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!可以在mounted中访问
  • $refs也不是响应式的,因此你不应该试图用它在模板中做数据绑定。
  • v-for 用于元素或组件的时候,引用信息将是包含 DOM 节点或组件实例的数组
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容