Vue $parent 对象
示例
在子组件中使用 $parent
对象,更改父组件中的 'text' 数据属性。
<template>
<div>
<h3>Change Text</h3>
<p>Click the button to toggle the text in the PRE tag of the parent component.</p>
<button v-on:click="this.$parent.text='Hello!'">Change text in parent</button>
</div>
</template>
运行示例 »
查看以下更多示例。
定义和用法
The $parent
object represents the Vue instance of the parent component.
If the $parent
object is used in the root component, the value of the $parent
object will be null
.
我们可以使用 $parent
对象直接从子组件访问父实例,以调用方法,读取或操作数据属性等。
更多示例
示例
在子组件中使用 $parent
对象,引用父组件中的方法。
<template>
<div>
<h3>Toggle Color</h3>
<p>Click the button to toggle the color in the P tag of the parent component.</p>
<button v-on:click="this.$parent.toggleColor">Toggle</button>
<p>The 'toggleColor' method is also in the parent component.</p>
</div>
</template>
运行示例 »
相关页面
Vue 教程: Vue 属性
Vue 教程: Vue $emit() 方法
Vue 教程: Vue 提供/注入
Vue 参考: Vue $emit() 方法
Vue 参考: Vue $root 对象