小白学习Vue（7）---创建组件（组件的data）

71 阅读 0 评论 47 点赞

我是靠谱客的博主美满翅膀，最近开发中收集的这篇文章主要介绍小白学习Vue（7）---创建组件（组件的data），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一.简介

今天，肺炎已经开始好转了，新增人数在不断的下降，所以我觉得，只要坚持，没有什么事过不去的，包括学习，积少成多，知识一定可以积累上去的。

2020.2.11

今天其实学习状态不怎么样，但是还是学了前端框架和每日英语，但是对于数据结构和计算机网络的学习就咕咕咕了，今天都是被游戏害的，哎嘿嘿。

二.代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件方法</title>
		<!-- <script src="./lib/vue.js"></script> -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		
		<div id="app"> 
			<!-- <p>{{msg}}</p>
			<p>{{msg2}}</p> -->
			<!-- 如果要使用组件，直接把组件名称，以HTML标签形式，引入页面 -->
			<mycom1></mycom1>
		</div>
		<script>
			//用extend来创建全局的vue组件
			// var com1 = Vue.extend({
			// 	template:'<h3>这是使用Vue.extend创建的组件</h3>'//通过template属性，指定组件的html结构
			// })
			//使用vue.component('组件名称',创建出来的模板对象)
			//如果用component定义全局组件的时候，使用驼峰命名（那么在引用的时候需要把 大写的驼峰字母改为小写，同时在两单词之间加上'-'
			//如果不是驼峰命名，那么直接进行引用就好了
			// Vue.component('mycom1',com1)
			
			
			//vue.component，第一个参数：组件的名称，将来在引入的时候，就是一个标签形式来引入它
			//第二个参数：vue.extend创建的组件，其中template就是组件将来要展示的html内容
			Vue.component('mycom1',Vue.extend({
				template:'<h3>hello</h3>'
			}))
			
			
			var vm  =new Vue({
				el:'#app',
				data:{
					
				}
			})
		</script>
	</body>
</html>

这是第一种创建组件的方法，太罗嗦了，有些麻烦，优化一下。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>创建组件的第二种方式</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		
		<div id="app">
			<mycom2></mycom2>
		</div>
		<script>
			//无论是哪种方式创建出来的组件，组件的template属性指向的模板内容，
			//必须有且只有唯一的一个根元素，所以推荐在里面放一个<div>元素，这样方便
			Vue.component('mycom2',{
				template:'<div><h3>GGGOOO</h3></div>'
			})
			
			var vm = new Vue({
				el:'#app',
				data:{		
				},
				methods:{				
				}
			})
		</script>
	</body>
</html>

2.这是第二种方法，在Vue.extend那里有了优化。但我们还有第三种方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>创建组件的第二种方式</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>

		<div id="app">
			<mycom3></mycom3>
		</div>

		<div id="app2">
			<!-- <mycom3></mycom3> -->
			<login></login>
		</div>
		<!-- 在控制的app外面，使用template定义组件的模板结构 -->
		<template id="tmp1">
			<div id="">
				<h1>这是通过template元素，在外部定义组件结构，这个方式，有代码的智能提示和高亮</h1>
				<h4>niubility</h4>
			</div>
		</template>


		<script>
			//无论是哪种方式创建出来的组件，组件的template属性指向的模板内容，
			//必须有且只有唯一的一个根元素，所以推荐在里面放一个<div>元素，这样方便
			Vue.component('mycom3', {
				template: '#tmp1'
			})

			var vm = new Vue({
				el: '#app',
				data: {},
				methods: {}
			})

			var vm2 = new Vue({
				el: '#app2',
				data: {

				},
				components: { //定义实例内部私有组件
					login: {
						template: '<h1>这是私有login</h1>'
					}

				}
			})
		</script>
	</body>
</html>

3.这是第三种，定义私有组件，这个很重要的

************************************************************************************************************

那么data怎么搞呢？

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>创建组件的第二种方式</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		
		<div id="app">
			<mycom1></mycom1>
		</div>
		<script>

			Vue.component('mycom1',{
				template:'<h3>GGGOO----{{msg}}</h3>',
				//组件中的对象必须是一个function，function内部必须返回一个对象
				//组件中的data和实例中的data的使用方式是完全一样的
				data:function(){
					return{
						msg:'这是组件的data定义的数据'
					}
				}
			
			
			})
			
			var vm = new Vue({
				el:'#app',
				data:{
					
				},
				methods:{
					
				}
			})
		</script>
	</body>
</html>

在这个地方，data内部必须是一个方法，返回必须是一个对象，要不然就不行，不符合语法标准

-------*-*-*-*---------------------------------------------------------------------------------

我们下面以一个例子来看

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>创建组件的第二种方式</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		
		<div id="app">
			<counter></counter>
			<hr >
			<counter></counter>
			<hr >
			
			<!-- <mycom2></mycom2> -->
		</div>
		
		<template id="tmp1">
			<div id="">
				<input type="button" @click="increase" name="" id="" value="点我" />
				<h3>{{count}}</h3>
			</div>	
		</template>
		
		<script>
			//这是一个计数器的组件，有个按钮，点击按钮，让data中的count加一
			Vue.component('counter',{
				template:'#tmp1',
				data:function(){
					return {
						count:'0'
					}
				},
				methods:{
					increase(){
						this.count++
					}
				}
			})
			
			var vm = new Vue({
				el:'#app',
				data:{
					
				},
				methods:{
					
				}
			})
		</script>
	</body>
</html>

这是实现了一个计数器的功能，是通过data来实现的，理解一下就非常简单了！