vue3 组件的引用与传参
HelloWorld 也可以替换成别的名称。vue3 引用组件的方式更加简单 只需要。官方demo里面就有对组件的引用。开箱即用,非常方便。
·
官方demo里面就有对组件的引用
<template>
<p> 我是App.vue组件 </p>
<HelloWorld msg="Hello Vue 3 + Vite"/>
</template>
<script setup lang="ts">
import HelloWorld from "@/components/HelloWorld.vue";
</script>
vue3 引用组件的方式更加简单 只需要。
import HelloWorld from "@/components/HelloWorld.vue";
开箱即用,非常方便。
HelloWorld 也可以替换成别的名称。
就可以使用了
参数是如何接受的呢
<script setup lang="ts">
defineProps<{
msg: string
}>()
</script>
<template>
<div class="greetings">
<h1 class="green">{{ msg }}</h1>
<h3>
You’ve successfully created a project with
<a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
</h3>
</div>
</template>
<style scoped>
h1 {
font-weight: 500;
font-size: 2.6rem;
top: -10px;
}
h3 {
font-size: 1.2rem;
}
.greetings h1,
.greetings h3 {
text-align: center;
}
@media (min-width: 1024px) {
.greetings h1,
.greetings h3 {
text-align: left;
}
}
</style>
defineProps<{
msg: string
}>()
即可
更多推荐
已为社区贡献1条内容
所有评论(0)