vue3.2代码片段合辑
props的使用
<!--a.vue-->
<template>
<div :style="{ color: props.color }">aa</div>
</template>
<script setup lang="ts">
const props = defineProps({
color: {
type: String,
default: "#000000",
},
});
</script>
<!--b.vue-->
<template>
<a :color=aColor>aa</a>
</template>
<script setup lang="ts">
import a from "./a.vue";
const aColor="#ff0000";
</script>
示例代码：svgicon
<template>
<svgxmlns
="http://www.w3.org/2000/svg":width="props.size":height="props.size":fill="props.color":style="
{ 'margin-right': '10' }"
<p
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z/>
</svg>
</template>
<script setup lang=" ts">
const props = defineProps({
color: {type: String,default: "#000000",
},
size: {type: Number,default: 20,
},
});
</script>
slot的使用:
<!--a.vue-->
<template>
<slot name="helloSlot">这是默认值！</slot>
</template>
<!--b.vue-->
<template>
<a>
<template #helloSlot>
aaaa
</template>
</a>
</template>
<script setup lang="ts">import a from "./a.vue";</script>
示例代码：没错！还是svgicon
<!--SVGIcon.vue-->
<template>
<svgxmlns
="http://www.w3.org/2000/svg":width="props.size":height="props.size":fill="props.color":style="
{ 'margin-right': '10' }"
<slot name="path
<path
d=" M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16
19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414
1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0
4H4a1 1 0 0 0
1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0
0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4
0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7
16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0
0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1
1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3
3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.41
/
</slot>
</svg>
</template>
<script setup lang="ts">
const props = defineProps({
color: {
type: String,
default: "#000000",
},
size: {
type: Number,
default: 20,
},
});
</script>
<!--IconCommunity.vue-->
<template>
<!--这边因为使用了默认值所以没给东西-->
<Icon/>
</template>
<script setup lang="ts">
import Icon from "./SVGIcon.vue";
</script>
v-for的使用
注意事项：谁的属性写了v-for循环的就是谁，而不是子项。 例如： <a v-for><div></div></a> 这里就是循环的a而不是div
示例代码：菜单项
<template>
<el-menu-item
v-for="menuItem in menuList"
:key="menuItem.id"
:index="menuItem.id.toString()"
>
<CommunityIcon/>
<span>{{ menuItem.title }}</span>
</el-menu-item>
</template>
<script setup lang="ts">
import CommunityIcon from "Icons/IconCommunity.vue";
const menuList = ref([
{ id: 0, title: "Hello" },
{ id: 1, title: "World" },
{ id: 2, title: "瑶瑶来啦！" },
{ id: 3, title: "没有抽到纳西妲呜呜呜呜" },
]);
</script>
效果：
如何使用字符串加载组件
注意事项：不能完全使用setup语法糖....但是只需要export需要字符串加载的组件就可以了！
示例代码：从Json加载菜单
<template>
<el-menu :style="{ border: 'none' }">
<el-menu-item
v-for="menuItem in menuList"
:key="menuItem.id"
:index="menuItem.id.toString()"
:style="{ 'border-bottom': '1px solid #ddd' }"
>
<component :is="menuItem.icon"></component>
<span>{{ menuItem.title }}</span>
</el-menu-item>
</el-menu>
</template>
<script setup lang="ts">
import IconCommunity from "./icons/IconCommunity.vue";
const menuList = JSON.parse(`
[
{
"id": 0,
"title": "菜单1",
"icon": "IconCommunity",
}
]
`);
</script>
<script lang="ts">
export default {
components: {
IconCommunity,
},
};
</script>
效果：
提一下，考虑到之后有多处如此使用及前端查看所有Icon并替换某个Icon的需求，所以考虑把用到的Icon组件全部注册为全局组件，这样就可以在vue文件中省略普通script的导出了！就可以跟正常的写法一样了！
Last modified: 16 十一月 2023