vue3.x 组件
Posted 天行子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue3.x 组件相关的知识，希望对你有一定的参考价值。
注：实例环境 vue cli构建的项目
app.vue
<template>
<Example></Example>
</template>
<script>
import Example from \'./components/Example\'
export default {
name: \'App\',
components: {
Example
}
}
</script>
<style>
</style>
Example.vue
<template>
<div>
<p>{{title}}</p>
<Component1></Component1>
<Component2></Component2>
<Component1></Component1>
<Component2></Component2>
</div>
</template>
<script>
import Component1 from "./Component1";
import Component2 from "./Component2";
export default {
name: "Example",
components: {Component2, Component1},
data:function () {
return {
title: \'Example 的title\'
}
}
}
</script>
<style scoped>
</style>
Component1.vue
<template>
<div>
<h3>我是组件1</h3>
<p>{{title}}</p>
</div>
</template>
<script>
export default {
name: "Component1",
data(){
return {
title: \'组件1title\'
}
}
}
</script>
<style scoped>
</style>
Component2.vue
<template>
<div>
<h3>我是组件2</h3>
<p>{{title}}</p>
</div>
</template>
<script>
export default {
name: "Component2",
data(){
return {
title: \'组件2title\'
}
}
}
</script>
<style scoped>
</style>
浏览器显示
以上是关于vue3.x 组件的主要内容，如果未能解决你的问题，请参考以下文章