前端Vue3与Element-plus(element ui的升级版element plus)

注意：props比useAttrs方法的优先级高（2个都可以获取父组件传递的属性与属性值：props接收了useAttrs就接收不到了）

1.通过npm命令安装Element-plus（如果cnpm安装好，也可使用此命令）

注意：这里使用--save局部安装，如果全局安装可以使用-g

npm  install  element-plus  --save

# 或 cnpm  install  element-plus  --save
# 或简写为
npm  i   element-plus  -S（大写）

2.2步：在main.js写入

//引入实例化上下文的api方法
import { createApp } from 'vue'
//引入element ui
import ElementPlus from 'element-plus'
//引入element ui样式    
import 'element-plus/dist/index.css'
//引入根组件    
import App from './App.vue'
 
//创建app
const app = createApp(App)

app.use(ElementPlus)//使用
//挂载
app.mount('#app');

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

        </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';
</script>

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

</div>
</template>
<script setup lang="ts">
//引入useAttrs方法 ：获取组件标签身上的属性与事件
import { useAttrs } from 'vue'  
//执行会返回一个对象
let $attrs = useAttrs()
//万一用props接受titile;
//props比useAttrs方法的优先级高（2个都可以获取父组件传递的属性与属性值）
let props = defineProps(['title']);
console.log(props);

</script>
<style scoped>
</style>