组件通信方式之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方法就获取不到该属性了
。
如有错误,欢迎指出,我修正!谢谢!