菜单
×
   ❮   
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 教程

Vue 首页 Vue Intro Vue Directives Vue v-bind Vue v-if Vue v-show Vue v-for Vue Events Vue v-on Vue Methods Vue Event Modifiers Vue Forms Vue v-model Vue CSS Binding Vue Computed Properties Vue Watchers Vue Templates

Scaling Up

Vue 介绍、方法和设置 Vue 第一个 SFC 页面 Vue 组件 Vue Props Vue v-for 组件 Vue $emit() Vue Fallthrough 属性 Vue Scoped Styling Vue 本地组件 Vue Slots Vue v-slot Vue Scoped Slots Vue 动态组件 Vue Teleport Vue HTTP 请求 Vue 模板 Refs Vue 生命周期钩子 Vue Provide/Inject Vue 路由 Vue 表单输入 Vue 动画 Vue v-for 动画 Vue 构建 Vue 组合式 API

Vue Reference

Vue Built-in Attributes Vue Built-in Components Vue Built-in Elements Vue Component Instance Vue Directives Vue Instance Options Vue Lifecycle Hooks

Vue 示例

Vue Examples Vue Exercises Vue Quiz Vue Server Vue Certificate

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

注意:请考虑使用 props/emitprovide/inject 在 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 Props

Vue 教程:Vue $emit() Method

Vue 教程:Vue Provide/Inject

Vue Reference: Vue $emit() Method

Vue 参考:Vue $root 对象


×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持