Vue组件化编程

最新推荐文章于 2024-06-14 10:39:01 发布

King Rat

最新推荐文章于 2024-06-14 10:39:01 发布

阅读量57

点赞数

分类专栏： Vue学习文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/dfghjkkjjj/article/details/125338662

版权

Vue学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

组件

组件定义：

实现局部功能的代码和资源集合。

作用：服用编码，简化关系。

非单文件组件：一个文件包含那个组件。

单文件组件：一个文件含1个组件

组件创建和使用：

1.创键组件

2.注册组件

3.使用组件

注意事项：

1.创建组件不能有el

2.创建组件data用函数式

3. 组件名，两个字母用-隔开,并用引号引起来，列：‘school-name'

注册组件两种方式：

1. 局部注册: (见代码）

2. 全局注册：Vue.component('组件名',组件）

组件创基使用实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/vue%20.js"></script>
	</head>
	<body>
		<div id="root">
			<h2>{{name}}</h2>
			<school></school>
			<school1></school1>
		</div>
	</body>
	<script type="text/javascript">
     //创建组件
	 const school=Vue.extend({
		 template:`
		 <div>
		 <h2>名称：{{name}}</h2>
		 <h2>地址：{{adress}}</h2>
		 </div>
		 `,
		 data(){
			 return{
				 name:'北京',
				 adress:'哈哈'
			 }
		 }
	 })
	 const school1=Vue.extend({
	 		 template:`
	 		 <div>
	 		 <h2>名称：{{name}}</h2>
	 		 <h2>地址：{{adress}}</h2>
	 		 </div>
	 		 `,
	 		 data(){
	 			 return{
	 				 name:'北京1',
	 				 adress:'哈哈1'
	 			 }
	 		 }
	 })
	 //注册组件（局部注册）
	 new Vue({
		 el:'#root',
		 data:{
			 name:'root'
		 },
		 components:{
			 school:school,
			 school1:school1
		 }
	 })
		
	</script>
</html>

组件的理解

组件本质是名为VueComponent的构造函数，是Vue.extend生成的

每次使用组件标签时都是new 构造函数

每次Vue.extend都会生成一个全新的VueComponent

new Vue()时，this 指向Vue实例

Vue.extend时，this指向VueComponent

组件是可复用的Vue实例，区别,有无el

组件嵌套

注意：要先创建组件，再注册，不然会报错

King Rat

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件化编程

组件组件创基使用实例：组件的理解组件本质是名为VueComponent的构造函数，是Vue.extend生成的每次使用组件标签时都是new 构造函数每次Vue.extend都会生成一个全新的VueComponent new Vue()时，this 指向Vue实例 Vue.extend时，this指向VueComponent 组件是可复用的Vue实例，区别,有无el组件嵌套注意：要先创建组件，再注册，不然会
复制链接

扫一扫