Vue的$root $parent $refs及插件的使用

#访问根实例

在每个 new Vue 实例的子组件中,根据实例可以通过$root property 进行访问.this.$root

new Vue({
  data: {
    foo: 1
  },
  computed: {
    bar: function () { /* ... */ }
  },
  methods: {
    baz: function () { /* ... */ }
  }
})

// 获取根组件的数据
this.$root.foo

// 写入根组件的数据
this.$root.foo = 2

// 访问根组件的计算属性
this.$root.bar

// 调用根组件的方法
this.$root.baz()

　

#访问父级组件实例

和 $root 类似，$parent property 可以用来从一个子组件访问父组件的实例。它提供了一种机会，可以在后期随时触达父级组件，以替代将数据以 prop 的方式传入子组件的方式。

 

#访问子组件实例或子元素

尽管存在 prop 和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的，你可以通过 ref 这个 attribute 为子组件赋予一个 ID 引用。例如：

<base-input ref="usernameInput"></base-input>

现在在你已经定义了这个 ref 的组件里，你可以使用：

this.$refs.usernameInput

注释:

       $refs属性是一个非常方便的调用组件,在实际的开发过程中使用非常的频繁.

#使用插件

通过全局方法Vue.use()使用插件.它需要在调用 new Vue() 启动应用之前完成:

//调用插件
Vue.use(Myplugin)

//初始化vue
new Vue({
//组件选项
})

Vue.use(MyPlugin, { someOption: true })