vue非单文件组件的使用

全局注册组件

如果多个页面都需要使用这个组件，可以将这个组件注册为全局组件。

全局注册：利用 Vue.component('组件名', 组件) 配置全局组件，例如：

// 第二步：全局注册组件
Vue.component('FrameHead',FrameHead);

假设有两个页面，同时使用一个组件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue2全局注册组件</title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		
		<!-- 页面一 -->
		<div id="APP1">
			<p>页面一</p>
			<my-code></my-code>
		</div>
		
		<hr/>
		
		<!-- 页面二 -->
		<div id="APP2">
			<p>页面二</p>
			<my-code></my-code>
		</div>

		<script>
			
			// 第一步：创建 MyCode 组件
			const MyCode = {
				template: `
					<div>
						<p>{
   
   {title}}</p>
					</div>
				`,
				data() {
					return {
						title: "你好呀！"
					}
				}
			}
			
			// 第二步：全局注册组件
			Vue.component('MyCode',MyCode);
			
			// 页面一的 Vue 实例
			const vm1 = new Vue({
				el: "#APP1"
			});
			
			// 页面二的 Vue 实例
			const vm2 = new Vue({
				el: "#APP2"
			});
		</script>
	</body>
</html>

注：组件全局注册后，就不需要在 new Vue() 中再定义了，并且所有 Vue 实例都可以使用这个组件。

组件嵌套使用

创建子组件：

// 第一步：创建 crumbs 组件【子组件】
const crumbs = Vue.extend({
	template:`
		<div>
			<span v-for="(item,index) in list" :key="index"> {
   
   {item}} </span>
		</div>
	`,
	data(){
		return {
			list: ["首页","用户管理","商品管理","轮播图管理"]
		}
	}
})

创建父组件：

// 第一步：创建 frameHead 组件【父组件】
const frameHead = Vue.extend({
	template: `
		<div>
			<strong>{
   
   {title}}</strong>
			<span>{
   
   {username}}</span>
			<hr/>
			<crumbs></crumbs>
		</div>
	`,
	data() {
		return {
			title: "商城管理系统",
			username: "张三"
		}
	},
	// 注册子组件
	components: {
		crumbs
	}
})

注：组件中也有 components 配置项，可以在组件中再注册子组件，并且将子组件写到当前的 template 模板中去使用。

创建 Vue 实例：

const vm = new Vue({
	el: "#APP",
	components: {
		frameHead
	}
});

注：在 Vue 实例中不需要再注册子组件了

使用组件

<div id="APP">
	<frame-head></frame-head>
</div>

完整代码：

<!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>
		</div>

		<script>
			// 第一步：创建 crumbs 组件【子组件】
			const crumbs = Vue.extend({
				template: `
					<div>
						<span v-for="(item,index) in list" :key="index"> {
   
   {item}} </span>
					</div>
				`,
				data() {
					return {
						list: ["首页", "用户管理", "商品管理", "轮播图管理"]
					}
				}
			})

			// 第一步：创建 frameHead 组件【父组件】
			const frameHead = Vue.extend({
				template: `
					<div>
						<strong>{
   
   {title}}</strong>
						<span>{
   
   {username}}</span>
						<hr/>
						<crumbs></crumbs>
					</div>
				`,
				data() {
					return {
						title: "商城管理系统",
						username: "张三"
					}
				},
				// 注册子组件
				components: {
					crumbs
				}
			})

			const vm = new Vue({
				el: "#APP",
				components: {
					frameHead
				}
			});
		</script>
	</body>
</html>

原创作者：吴小糖

创建时间：2023.5.13

vue非单文件组件的使用

猜你喜欢