VUE2 学习（组件、）-day06

syfjava

已于 2023-11-14 11:31:31 修改

阅读量57

点赞数

分类专栏： VUE2-VUE3 学习文章标签： vue.js

于 2023-10-03 10:36:58 首次发布

本文链接：https://blog.csdn.net/javaxueba/article/details/133340850

版权

VUE2-VUE3 学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中的组件化开发，包括组件的定义、注册、使用方法，以及组件命名规则、单文件组件的结构和VueComponent与Vue原型的关系。通过实例演示了如何创建、注册和使用组件，以及组件实例和Vue实例的区别。

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

一、模块、组件、模块化、组件化

1、使用传统方式编写应用

依赖混乱，代码复用率不高

2、使用组件方式编写应用

相同的组件（头部、底部直接复用）

3、组件的定义

二、基本使用

（1）定义组件（创建组件）
（2）注册组件
（3）使用组件（写组件标签）

细说三大步骤：

如何定义一个组件：使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；

区别如下：
el不要写，因为最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
data必须写成函数，因为避免组件被复用时，数据存在引用关系。
备注：使用template可以配置组件结构。
如何注册组件

局部注册：靠new Vue的时候传入components选项
全局注册：靠Vue.component(‘组件名’,组件)
编写组件标签：< school>< /school>

关于组件名

一个单词组成：第一种写法(首字母小写)：school；第二种写法(首字母大写)：School
多个单词组成：第一种写法(kebab-case命名)：my-school；第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
备注：

组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
可以在组件中使用name配置项指定组件在开发者工具中呈现的名字。
关于组件标签:

第一种写法：
第二种写法：
备注：不用使用脚手架时，会导致后续组件不能渲染。
创建组件的一个简写方式：

const school = Vue.extend(options) 可简写为：const school = options

代码DEMO

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title></title>

</head>

<body>
	<div id="root">
		<my-school></my-school>
		<hr />
		<student></student>
	</div>

	<div id="root2">
		<hello></hello>
	</div>

	<script type="text/javascript" src="../js/vue.js"></script>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false

	// 1- 创建组件
	const school = Vue.extend({
		name:'schoolNew',// name配置项指定组件在开发者工具中呈现的名字
		//定义组件模版，需要<div> 跟节点包裹
		template: `
		<div>
			<h2>{{schoolName}}</h2>
			<h2>{{addr}}</h2>
			<button @click="showName()">点我显示学校名称</button>
		</div>`	,
		data() {
			return {
				schoolName: 'VUE学院',
				addr: '北京大道168号'
			}
		},
		methods: {
			showName(){
				alert(this.schoolName);
			}
		},
	})

	//Vue.extend 简写方式
	const student = {
		template: `
		<div>
		<h2>{{studentName}}</h2>
		<h2>{{age}}</h2>
	</div>`	, 
		data() {
			return {
				studentName: '练习VUE的小学生',
				age: 24
			}
		},
	}

	//2-局部注册组件
	new Vue({
		el: '#root',
		components: {
			'my-school': school,
			student: student
		}
	})

	//3-在页面上引用标签
	//<school></school>

	//4-全局组注册
	const hello = Vue.extend({
		template:`
			<div>
				<h2>你好!, {{name}}</h2>
			</div>
		`,
		data() {
			return {
				name : 'JACK'
			}
		},
	})

	//注册全局组件
	Vue.component('hello', hello);

	new Vue({
		el:"#root2"
	})

	

</script>

</html>

三、非单文件组件

在上面二的例子上，编写嵌套例子

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title></title>
</head>
<body>
	<div id="root">
		<app></app>
	</div>
	<script type="text/javascript" src="../js/vue.js"></script>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false

	// 1- 创建组件
	//Vue.extend 简写方式 定义学生组件
	const student = {
		template: `
		<div>
			<h2>{{studentName}}</h2>
			<h2>{{age}}</h2>
		</div>`	,
		data() {
			return {
				studentName: '练习VUE的小学生',
				age: 24
			}
		},
	}

	//手法一：把上面 学生 组件放入到 学校 组件中
	const school = Vue.extend({
		template: `
		<div>
			<h2>{{schoolName}}</h2>
			<h2>{{addr}}</h2>
			<button @click="showName()">点我显示学校名称</button>
			<student></student>
		</div>`	,
		data() {
			return {
				schoolName: 'VUE学院',
				addr: '北京大道168号'
			}
		},
		methods: {
			showName() {
				alert(this.schoolName);
			}
		},
		components: {
			student
		}
	})

	//定义hello组件，和学校组件同级

	const hello = Vue.extend({
		template: `
		<div>
				<h1>{{msg}}</h1>
			</div>
		`,
		data() {
			return {
				msg: '欢迎来到VUE学校'
			}
		},
	})

	//手法二：定义app组件管理所有组件
	const app = Vue.extend({
		template: `
			<div>
				<hello></hello>
				<hr />
				<my-school></my-school>
			</div>
		`,
		components: {
			'my-school': school,
			hello
		}
	});

	//2-局部注册组件
	new Vue({
		el: '#root',
		components: {
			app
		}
	})
</script>
</html>

VueComponent

1、school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的

2、我们只需要写<my-school></my-school>，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)

3、特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！

4、关于this指向：

4-1、组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是VueComponent实例对象
4-2、new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是Vue实例对象
5、VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）,Vue的实例对象，以后简称vm.

四、一个重要的内置关系

一个重要的内置关系：VueComponent.prototype.__proto__=== Vue.prototype

为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title></title>
</head>

<body>
	<div id="root">
		<my-school></my-school>
	</div>
	<script type="text/javascript" src="../js/vue.js"></script>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false
	//1- 显式、隐式对象 介绍
	function Demo() {
		this.a = 1;
	}
	const x = new Demo();
	//显式原型对象
	console.log(Demo.prototype);
	//隐式原型对象
	console.log(x.__proto__);
	//这个2个其实是一个东西  返回：true
	console.log(Demo.prototype === x.__proto__);

	//2- 验证： VueComponent.prototype.__proto__=== Vue.prototype
	const school = Vue.extend({
		template: `
		<div>
			<h2>{{schoolName}}</h2>
			<h2>{{addr}}</h2>
			<button @click="showName()">点我显示学校名称</button>
		</div>`	,
		data() {
			return {
				schoolName: 'VUE学院',
				addr: '北京大道168号'
			}
		},
		methods: {
			showName() {
				alert(this.schoolName);
			}
		}
	})

	//2-局部注册组件
	new Vue({
		el: '#root',
		components: {
			'my-school': school,
		}
	})

	// 返回：true
	console.log(school.prototype.__proto__=== Vue.prototype);

</script>

</html>

五、单文件组件

5-1 School.vue

<template>
	<!--组件主体-->
  <div class="demo">
    <h2>{{ schoolName }}</h2>
    <h2>{{ addr }}</h2>
    <button @click="showName()">点我显示学校名称</button>
    <student></student>
  </div>
</template>

<script>
// 组件交互代码 js、方法等


	// const school = Vue.extend({
	// data() {
	// 	return {
	// 	schoolName: "VUE学院",
	// 	addr: "北京大道168号",
	// 	};
	// },
	// methods: {
	// 	showName() {
	// 	alert(this.schoolName);
	// 	},
	// },
	// });
	// // 默认暴露
	// export default school;


	//简写
	export default {
		name:'School',
		data() {
		return {
		schoolName: "VUE学院",
		addr: "北京大道168号",
		};
	},
	methods: {
		showName() {
		alert(this.schoolName);
		},
	},
	};
</script>


<style>
/* 组件样式 */
.demo{
	background-color: skyblue;
}

</style>

5-2 Student.vue

<template>
  <div class="demo">
    <h2>{{ studentName }}</h2>
    <h2>{{ age }}</h2>
  </div>
</template>


<script>
export default {
  name: "Student",
  data() {
    return {
      studentName: "练习VUE的小学生",
      age: 24,
    };
  },
};
</script>



<style> 
.demo {
  background-color: greenyellow;
}
</style>

5-3 App.vue

<template></template>
    <div>
        <School></School>
        <Student></Student>
    </div>
<script>
//   引入组件
import School from "./School";
import Student from "./Student";

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

<style>
</style>

5-4 main.js


/*
main.js是整个项目的入口文件
*/

//引入 Vue
import Vue from 'vue'
//引入App组件，他是所有文件的父组件
import App from './App.vue'

Vue.config.productionTip = false
//创建Vue实例，vm
new Vue({
  render: h => h(App),
}).$mount('#app')

5-5 index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    
    <!-- 针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--开启移动端理想窗口  -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 配置页签图标 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 配置网页的标题 -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

syfjava

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE2 学习（组件、）-day06

5、VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）,Vue的实例对象，以后简称vm.配置中：data函数、methods中的函数、watch中的函数、computed中的函数。el不要写，因为最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。：data函数、methods中的函数、watch中的函数、computed中的函数。组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。可以在组件中使用name配置项指定组件在开发者工具中呈现的名字。
复制链接

扫一扫

专栏目录