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>

定义与用法

$parent 对象表示父组件的 Vue 实例。

如果 $parent 对象在根组件中使用，$parent 的值将为 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>