访问元素&组件
01.访问根实例 $root
// Vue 根实例 new Vue({ data: { foo: 1 }, computed: { bar: function () { /* ... */ } }, methods: { baz: function () { /* ... */ } } })
所有的子组件都可以将这个实例作为一个全局store来访问或使用
// 获取根组件的数据 this.$root.foo // 写入根组件的数据 this.$root.foo = 2 // 访问根组件的计算属性 this.$root.bar // 调用根组件的方法 this.$root.baz()
02.访问父级组件实例 $parent
$parent可以在后期随时触达父级组件,以替代将数据以prop的方式传入子组件的方式
注意:在绝大多数情况下,触达父级组件会使得你的应用更难调试和理解。
03.访问子组件实例或子元素 ref
<base-input ref="usernameInput"></base-input>
this.$refs.usernameInput
该<base-input>组件也可以使用一个类似的ref提供对内部这个指定元素的访问,例如:
<input ref="input">
甚至可以通过其父级组件定义方法:
methods: { // 用来从父级组件聚焦输入框 focus: function () { this.$refs.input.focus() } }
这样就允许父级组件通过下面的代码聚焦<base-input>里的输入框:
this.$refs.usernameInput.focus()
注意:$refs只会在组件渲染完成之后生效,并且它们不是响应式的。你应该避免在模板或计算属性中访问$refs
04.程序化的事件侦听器 $emit
$emit可以被v-on侦听
- 通过$on(eventName, eventHandler) 侦听一个事件
- 通过$once(eventName, eventHandler) 一次性侦听一个事件
- 通过$off(eventName, eventHandler) 停止侦听一个事件
文档链接:https://cn.vuejs.org/v2/guide/components-edge-cases.html