Menu
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

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 对象直接从子组件访问父实例,以调用方法,读取或操作数据属性等。

注意: 考虑使用 属性/发射提供/注入 用于 Vue 组件之间的通信,因为使用这些明确定义的通信方式的代码更易于维护。


更多示例

示例

在子组件中使用 $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 对象


×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.