使用$root
子组件中的对象,以更改 Vue 应用程序根组件中的“文本”数据属性。
<template>
<div>
<h3>Change Text</h3>
<p>Click the button to toggle the text in the PRE tag of the root component.</p>
<button v-on:click="this.$root.text='Hello!'">Change text in root</button>
</div>
</template>
运行示例 »
请参阅下面的更多示例。
这个$root
object 表示整个 Vue 应用程序的根组件的 Vue 实例。
当。。。的时候$root
object 在根组件中使用,它仅引用该组件本身的实例。
我们可以使用$root
对象直接从子组件(甚至是组件树结构的最深处)访问根实例,以调用方法、读取或操作数据属性等。
使用$root
子组件中的对象,以更改颜色<p>
根组件中的标记,在组件树结构中比上一级更高。
<template>
<div>
<h4>Grand Child Component</h4>
<p>Click the button to toggle the color of the P tag in the root component.</p>
<button v-on:click="this.$root.color='lightgreen'">Change color in root</button>
</div>
</template>
运行示例 »
Vue教程:Vue 道具
Vue教程:Vue $emit() 方法
Vue教程:Vue 提供/注入
Vue参考:Vue $emit() 方法
Vue参考:Vue $parent 对象
截取页面反馈部分,让我们更快修复内容!也可以直接跳过填写反馈内容!