vue组件使用三步走

最新推荐文章于 2025-02-14 16:29:03 发布

in or not

最新推荐文章于 2025-02-14 16:29:03 发布

阅读量198

点赞数

分类专栏： vue 文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/qq_w3/article/details/130688464

版权

vue 专栏收录该内容

1 篇文章

订阅专栏

文章介绍了如何在Vue项目中使用单文件组件（.vue），包括组件名的规范，如School.vue和MySchool.vue。主要通过main.js文件引入Vue和App组件，并关闭生产提示。在App组件中，导入并使用School和Student子组件，展示数据绑定的应用。

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

组件是什么这里就不阐述了，直接进入正题，组件该怎样使用。
此次就是单文件文件，即.vue结尾的。
注意组件名写法：
第一种单个词的：school.vue或者School.vue
第二种多个词的:my-school.vue或者MySchool.vue
一般都使用每一种的第二个，与vue开发者工具的呈现相呼应。
main.js

/* 
	该文件是整个项目的入口文件
*/
//引入Vue
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//关闭vue的生产提示
Vue.config.productionTip = false

//创建Vue实例对象---vm
new Vue({
	el:'#app',
	//render函数完成了这个功能：将App组件放入容器中
  render: h => h(App),
})```

==App组件==

```java
<template>
	<div>
		<img src="./assets/logo.png" alt="logo">
		<School></School>
		<Student></Student>
	</div>
</template>

<script>
	//引入组件
	import School from './components/School'
	import Student from './components/Student'

	export default {
		name:'App',
		components:{
			School,
			Student
		}
	}
</script>

Student组件
School组件一样，只要把内容改成你自己的即可

<template>
	<div>
		<h2>学生姓名：{{ name }}</h2>
		<h2>学生年龄：{{ age }}</h2>
	</div>
</template>

<script>
export default {
	name: 'Student',
	data() {
		return {
			name: '张三',
			age: 18
		}
	}
}
</script>