vue非单文件组件网站首页 技术杂谈

vue非单文件组件

小吴吴吴呀 2024-06-17 10:13:39

简介vue非单文件组件

非单文件组件指的是：一个文件中包含了多个组件。

Vue 中使用组件的三大步骤：1. 创建组件、2. 注册组件、3. 使用组件。

组件使用流程【第一步：创建组件】

利用 Vue.extend() 方法创建组件:

// 第一步：创建 frameHead 组件
const FrameHead = Vue.extend({
	name: "fhead",
	template:`
		<div>
			<strong>{{title}}</strong>
			<span>{{username}}</span>
		</div>
	`,
	data(){
		return {
			title: "商城管理系统",
			username: "张三"
		}
	}
})

// 第一步：创建 frameNav 组件【简写】
// const 组件名 = Vue.extend(配置对象) 可以简写为：const 组件名 = 配置对象;
const FrameNav = {
	template:`
		<ul>
			<li v-for="(item,index) in list" :key="index" @click="isHref(item)">
				{{item}}
			</li>
		</ul>
	`,
	data(){
		return {
			list: ["首页","用户管理","商品管理","轮播图管理"]
		}
	},
	methods:{
		isHref(name){
			alert(`跳转至${name}`);
		}
	}
}

注：Vue.extend() 中的内容和 new Vue() 中的内容基本一样，也可以写 data 数据、methods 方法、计算属性等内容。它们的区别在于：

- 组件中不可以写 el ，因为所有的组件都要经过一个 Vue 实例管理，由 Vue 实例决定服务那个容器。

- 组件中的 data 必须写成函数，因为避免多次使用组件时，数据存在引用的问题（多个组件共用一块数据的问题）。

- 组件需要使用 template 配置结构内容，另外 template 中必须有一个最大的根元素包裹所有内容。

- 组件中可以使用 name 配置别名，常用于组件缓存过滤。

组件简写：const 组件名 = Vue.extend(配置对象) 可以简写为：const 组件名 = 配置对象

组件使用流程【第一步：注册组件】

局部注册：利用 new Vue 的时候配置 components 选项

const vm = new Vue({
	el: "#APP",
	// 第二步：注册组件（局部注册）
	components:{
		// FrameHead: FrameHead, 名称相同时可以简写
		FrameHead,
		FrameNav
	},
	data(){
		return {
			content: "网页内容"
		}
	}
});

注：组件名是由注册组件时指定的，多个单词时可以用大驼峰命名 MyCode 或者短横线命名 my-code 。另外命名时尽量避免 HTML 中已有的元素名称，例如：h2、H2 都不行。

组件使用流程【第三步：使用组件】

<div id="APP">
	<!-- 第三步：使用组件 -->
	<frame-head></frame-head>
	<hr/>
	<!-- 第三步：使用组件 -->
	<frame-nav></frame-nav>
	<hr/>
	<p>{{content}}</p>
</div>

注：使用组件就跟使用标签一样。如果是多个单词，需要使用短横线命名 my-code，在脚手架中也可以使用大驼峰命名 MyCode 。另外在脚手架中还可以写成单标签的格式，但是不使用脚手架时，写成单标签会导致后续的组件不能渲染。

组件使用流程【完整代码】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue2非单文件组件使用流程</title>
		<script src="./js/vue.js"></script>
	</head>
	<body>

		<div id="APP">
			<!-- 第三步：使用组件 -->
			<frame-head></frame-head>
			<hr />
			<!-- 第三步：使用组件 -->
			<frame-nav></frame-nav>
			<hr />
			<p>{{content}}</p>
		</div>

		<script>
			// 第一步：创建 frameHead 组件
			const FrameHead = Vue.extend({
				name: "fhead", // 定义别名
				template: `
					<div>
						<strong>{{title}}</strong>
						<span>{{username}}</span>
					</div>
				`,
				data() {
					return {
						title: "商城管理系统",
						username: "张三"
					}
				}
			})

			// 第一步：创建 frameNav 组件【简写】
			// const 组件名 = Vue.extend(配置对象) 可以简写为：const 组件名 = 配置对象;
			const FrameNav = {
				template: `
					<ul>
						<li v-for="(item,index) in list" :key="index" @click="isHref(item)">
							{{item}}
						</li>
					</ul>
				`,
				data() {
					return {
						list: ["首页", "用户管理", "商品管理", "轮播图管理"]
					}
				},
				methods: {
					isHref(name) {
						alert(`跳转至${name}`);
					}
				}
			}

			const vm = new Vue({
				el: "#APP",
				// 第二步：注册组件（局部注册）
				components: {
					// FrameHead: FrameHead, 名称相同时可以简写
					FrameHead,
					FrameNav
				},
				data() {
					return {
						content: "网页内容"
					}
				}
			});
		</script>
	</body>
</html>