vue使用$attrs实现组件间通信

最新推荐文章于 2024-09-19 14:55:03 发布

may_walkaway

最新推荐文章于 2024-09-19 14:55:03 发布

阅读量335

点赞数 2

分类专栏： vue学习

本文链接：https://blog.csdn.net/sinat_27535209/article/details/94025103

版权

vue学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.官网的介绍

在这里插入图片描述

2.示例代码

父组件A：

<template>
  <div>
    这是A组件的{{ msg }}
    <B :msgb="msg" :msgbb="msg"></B>
  </div>
</template>
 
<script>
import B from '@/components/B'
export default {
  components:{
    B
  },
  data () {
    return {
      msg: '666'
    }
  }
}
</script>
 
<style>
 
</style>

子组件B:

<template>
  <div>
    这是B组件的{{ $attrs.msgb }}---{{ $attrs.msgbb }}
    <C :msgc="$attrs.msgb"></C>
  </div>
</template>
 
<script>
import C from '@/components/C'
export default {
  components: {
    C
  },
  inheritAttrs: false,
  data () {
    return {
 
    }
  }
}
</script>
 
<style>
 
</style>

子孙组件C：

<template>
  <div>
    这是C组件的{{ $attrs.msgc }}
  </div>
</template>
 
<script>
export default {
  data () {
    return {
 
    }
  },
  inheritAttrs: false
}
</script>
 
<style>
 
</style>