vue学习

_Joker_
214 阅读3分钟

组件注册

vue组件分为全局组件和局部组件，全局组件可以在多个vue实例当中使用，而局部组件只可以在相应vue实例当中使用

1)全局组件

组件当中也可以有自己的data、methods等属性，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">
			<button-counter></button-counter>
		</div>
	</body>
	<script>
		// 注册一个名为button-counter的全局组件
		Vue.component('button-counter', {
			data: function() {
				return {
					count: 12345
				}
			},
			template: '<h3>{{count}}</h3>'
		})
		new Vue({
			el: '#app'
		})
	</script>
</html>

运行结果

2）局部组件

局部组件需要挂载到vue实例中，用到vue实例当中的components属性，该属性是一个对象

<!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">
			<button-counter></button-counter>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			components: {
				// 注册一个名为button-counter的局部组件
				'button-counter': {
						data: function() {
							return {
								count:'局部组件'
							}
						},
						template: '<h3>{{count}}</h3>'
				}
			}
		})
	</script>
</html>

运行结果

组件通讯

组件间通讯有两种情况，父组件向子组件传递，子组件向父组件传递

1）父组件向子组件传值

子组件通过props属性来实，props可以是数组，也可以是对象，根据需求而定，因为vue实例也可以看做成一个组件，所以这里的vue实例是父组件，button-counter是局部组件的同时也是子组件，在vue实例的data当中定义一个msg变量，在button-counter子组件添加props属性，属性值是一个数组，数组中有一个sunmsg变量，在template当中使用这个变量，在body中使用组件时绑定这个sunmsg属性，绑定的值为vue实例data中的msg,代码如下：

<!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">
			<button-counter :sunmsg="msg"></button-counter>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data:{
				msg:'父组件向子组件传值'
			},
			components: {
				// 注册一个名为button-counter的局部组件
				'button-counter': {
						props:['sunmsg'],
						template: '<h3>{{sunmsg}}</h3>'
						
				}
			}
			
		})
	</script>
</html>

运行结果

2）子组件向父组件通讯

为了让代码看起来更加美观简洁，我这里将子组件抽离出vue实例外注册，子组件中的模板再抽离出来。

模板中放一个按钮，按钮加上一个点击事件，当事件触发就会执行方法cpnclick，参数为12345，所以这里我们需要在子组件的methods属性中添加cpnclick方法，带一个参数val，然后我们使用this.$emit('方法名',方法参数)向外发射事件，$emit()最多两个参数，我这里写成this. $emit('sunclick',val)。

在使用组件时，我们要在组件标签中监听$emit()抛出的sunclick事件，当事件触发会执行myclick方法，这里的myclick不要带参数，所以我们需要在vue实例的methods当中定义myclick，带一个参数，方法执行在控制台打印出该参数的操作， 代码如下：

<!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">
			<cpn @sunclick="myclick"></cpn>
		</div>
		
		<template id="tem">
			<div>
				<button @click="cpnclick(12345)">点击子组件</button>
			</div>
		</template>
	</body>
	<script>
		const cpn = {
						props:['sunmsg'],
						template: '#tem',
						methods:{
							cpnclick(val){
								this.$emit('sunclick',val)
							}
						}
				}
		new Vue({
			el: '#app',
			components: {
				cpn
			},
			methods:{
				myclick(val){
					console.log(val)
				}
			}
			
		})
	</script>
</html>

运行结果

avatar
文章
阅读
粉丝