组件通信方式之useAttrs

组件通信方式之useAttrs

直接上代码ba~

父组件

<script setup lang="ts">
//图标组件
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from "@element-plus/icons-vue";
import MButton from "./HintButtonM.vue";
const handler = () => {
  alert("你真棒!");
};
</script>
<template>
  <div class="container">
    <el-button type="success" :icon="Search"></el-button>
    <hr />
    <MButton type="success" :icon="Edit" title="123" @click="handler"></MButton>
  </div>
</template>

<style scoped></style>

子组件

<script setup lang="ts">
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from "@element-plus/icons-vue";
//vue3框架提供一个方法useAttrs方法,它可以获取组件身上的属性与事件！！！
import { useAttrs } from "vue";
//此方法执行会返回一个对象
let $attrs = useAttrs();
//万一用props接受title
let props = defineProps(["title"]);
//props与useAttrs方法都可以获取父组件传递过来的属性与属性值
//但是props接受了useAttrs方法就获取不到了
console.log($attrs, props);
</script>
<template>
  <div :title="title">
    <el-button :="$attrs"></el-button>
  </div>
</template>

<style scoped></style>

总结

1.useAttrs方法,可以获取组件身上的属性与事件！！！
2.props与useAttrs方法都可以获取父组件传递过来的属性与属性值,
但是props接收的属性,useAttrs方法就获取不到该属性了。

如有错误，欢迎指出，我修正！谢谢！