Vue组件通信09-多层级组件通信（爷爷到孙子-传方法）-$listener

最新推荐文章于 2023-10-03 10:30:00 发布

书院二层楼

最新推荐文章于 2023-10-03 10:30:00 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： Vue 多层级通信 listener

本文链接：https://blog.csdn.net/caoxinjian423/article/details/108964452

这篇博客介绍了在Vue中如何实现多层级组件通信，从爷爷组件到孙子组件，通过使用$listener进行方法传递的详细步骤，并提供了components/Parent、Son和Grandson组件的代码示例，以及最终在App.vue中的应用效果截图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

components/Parent.vue

<template>
    <div>
        我是父组件
        <br>
        这里显示父级的msg:{
  
  {msg}}
        <Son :msg="msg" @changeMsg="changeMsg"></Son>
    </div>
</template>

<script>
/*
$listeners:
包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 
传入内部组件——在创建更高层次的组件时非常有用。
 */
 import Son from '../components/Son';
    export default {
       components: {
           Son,
       },
       data() {
           return {
               msg: "我是父级的msg",
               title:"我是父级传递的title"
           };
       },
       methods: {
           changeMsg(msg) {
               this.msg = msg;
           },
       },
    }
</script>

<style scoped>

</style>

components/Son.vue

<template>
    <div>
        <hr>
        我是子组件
        <br>
        <button @

最低0.47元/天解锁文章

200万优质内容无限畅学