Vue3组件通信之useAttrs通信

最新推荐文章于 2024-06-07 10:55:32 发布

躺平的乐子人

最新推荐文章于 2024-06-07 10:55:32 发布

阅读量315

点赞数

分类专栏： Vue3 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_73368873/article/details/131354952

版权

Vue3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Vue3引入了useAttrs方法，允许组件获取并使用父组件传递的属性和事件，如在示例中，父组件通过属性和事件向子组件HintButton传递数据，子组件则利用useAttrs来接收这些属性和事件，实现父子组件间的通信。

摘要由CSDN通过智能技术生成

简述

在vue3后，vue提供了useAttrs方法，来获取组件的属性和事件，由此来实现组件通信的方法。

简单案例

目的：由父组件将数据作为组件的属性传递给子组件

父组件

父组件引入子组件，由通过给子组件赋予属性和值

<template>
  <div>
    <h1>useAttrs</h1>
    <el-button type="primary" size="small" :icon="Edit"></el-button>
    <!-- 自定义组件 -->
    <HintButton type="primary" size="small" :icon="Edit" title="编辑按钮" @click="handler" @xxx="handler"></HintButton>
  </div>
</template>

<script setup lang="ts">
//vue3框架提供一个方法useAttrs方法,它可以获取组件身上的属性与事件！！！
//图标组件
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from "@element-plus/icons-vue";
import HintButton from "./HintButton.vue";
//按钮点击的回调
const handler = ()=>{
  alert(12306);
}
</script>

<style scoped>
</style>

子组件

获取父组件传递的属性的值

<template>
  <div :title="title">
     <el-button :="$attrs"></el-button>   
  </div>
</template>

<script setup lang="ts">
//引入useAttrs方法:获取组件标签身上属性与事件
import {useAttrs} from 'vue';
//此方法执行会返回一个对象
let $attrs = useAttrs();

//万一用props接受title
let props =defineProps(['title']);
//props与useAttrs方法都可以获取父组件传递过来的属性与属性值
//但是props接受了useAttrs方法就获取不到了
console.log($attrs);
</script>

<style scoped>
</style>