学习笔记：Vue——处理边界情况

 

访问元素&组件

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