vue页面中引入其他vue组件

最新推荐文章于 2024-07-08 10:29:04 发布

原创最新推荐文章于 2024-07-08 10:29:04 发布 · 7.4k 阅读

13 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

29 篇文章

订阅专栏

本文详细介绍了如何在Vue.js中注册并使用自定义组件。通过一个简单实例，演示了从创建组件到在父组件中引入、注册及使用的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

比如说有两个vue组件，app.vue,test.vue

要在app.vue中使用test.vue组件，则需要在app.vue组件中进行注册：

下面举一个简单的例子帮助理解：
test.vue:

<templete>
		<div class="test"></div>
		</templete>
		<script>
		export default{name:"test"}
		</script>
		<style></style>

则在app.vue中的内容为：

<templete>
	<div class="app">
		<test></test>//此处用于激活组件
	</div>
	</templete>
	<script>
	import test from 'path/test.vue'(注：path为相对于test.vue的相对路径)//此处用于引入test.vue
	export default{
		name:"app",
		components: {
			test		//在此处注册
		}
	}
	</script>
	<style></style>