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

#访问根实例

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

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 })