Vue学习 17组件

Revin050

已于 2022-07-16 10:30:27 修改

阅读量101

点赞数 1

分类专栏： VUE学习文章标签： vue.js 学习 javascript

于 2022-02-21 18:31:53 首次发布

本文链接：https://blog.csdn.net/qq_45847016/article/details/123052572

版权

VUE学习专栏收录该内容

24 篇文章 1 订阅

订阅专栏

本文详细介绍了在Vue中创建和使用组件的步骤，包括定义组件、注册组件以及在HTML中编写组件标签。通过示例展示了非单文件组件的实现，并解释了组件名、组件标签的规范以及单文件组件的写法。强调了组件数据必须为函数形式以避免复用时的数据共享问题。

摘要由CSDN通过智能技术生成

组件

Vue中使用组件的三大步骤：
	一、定义组件(创建组件)
	二、注册组件
	三、使用组件(写组件标签)
	这个过程类似绑定事件的过程。
一、如何定义一个组件？
		使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
		区别如下：
			1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
			2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
		备注：使用template可以配置组件结构。
二、如何注册组件？
		1.局部注册：靠new Vue的时候传入components选项
		2.全局注册：靠Vue.component('组件名',组件)
三、编写组件标签：
		<person></person>

非单文件组件

非单文件组件，顾名思义，就是不是单文件组件，即一个文件中包含有n个组件。通常写在.html中
为了更好的演示非单文件组件，列举下面的例子。

<body>

	<div id="demo">
	<!-- 第三步：编写标签-->
		<person1></person1>
		<person2></person2>
	</div>
	<script type="text/javascript">
		//第一步：创建person1组件
		const person1 = Vue.extend({
			template: `
				<div >
					<h1>组件一</h1>
					<h2>名字{{name}}</h2>
					<h2>年龄{{age}}</h2>
					<button @click="name='Revin1'">点我更换姓名</button>	
				</div>
			`,
			// el:'#demo', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
			data() {
				return {
					name: 'Revin',
					age: 26
				}
			},
		})
		//第一步：创建person2组件
		const person2 = Vue.extend({
			template: `
				<div>
					<h1>组件二</h1>
					<h2>名字{{name}}</h2>
					<h2>年龄{{age}}</h2>
					<button @click="name='Revin2'">点我更换姓名</button>
				</div>
			`,
			data() {
				return {
					name: 'Revin',
					age: 26
				}
			}
		})
		//创建vm
		var vm = new Vue({
			el: '#demo',
			//第二步：注册组件（局部注册）
			components: {
				person1,
				person2
			}
		})
	</script>
</body>

运行结果如下所示
在这里插入图片描述

单文件组件

单文件组件，即一个文件中仅包含一个组件。通常写在.vue中。
将上面一个组件person的功能写入单文件组件是如下效果。

<template>
  <div class="demo">
    <h2>你好,{{ name }}</h2>
    <h2>你今年{{ age }}岁了</h2>
    <button @click="name = 'Revin1'">点击更换名字</button>
  </div>
</template>   
<script>
export default {
  name: "Person",
  data() {
    return {
      name: "Revin",
      age: 26,
    };
  },
};
</script>
<style>
.demo {
  background-color: skyblue;
}
</style>

注意事项

1.关于组件名:
	一个单词组成：
		第一种写法(首字母小写)：school
		第二种写法(首字母大写)：School
	多个单词组成：
		第一种写法(kebab-case命名)：my-school
		第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
	备注：
		(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
		(2).可以使用name配置项指定组件在开发者工具中呈现的名字。
2.关于组件标签:
	第一种写法：<school></school>
	第二种写法：<school/>
	备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。
3.一个简写方式：
	const school = Vue.extend(options) 可简写为：const school = options