Vue组件开发2

最新推荐文章于 2024-07-09 14:58:59 发布

一麻袋小猫

最新推荐文章于 2024-07-09 14:58:59 发布

阅读量137

点赞数

分类专栏： Vue基础文章标签： vue.js

本文链接：https://blog.csdn.net/Zmongo/article/details/105730755

版权

Vue基础专栏收录该内容

16 篇文章 0 订阅

订阅专栏

非父子组件间传值（兄弟）

单独的时间中心管理组件间的通信
在这里插入图片描述

在这里插入图片描述
监听事件与销毁事件

触发事件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	 <div id="app">
		<div>父组件</div>
		<div>
			<button @click='handle'>销毁事件 </button>
		</div>
		<test-tom></test-tom>
		<test-jerry></test-jerry>
	 </div>
	 <script src="js/vue.js"></script>
	 <script>
	 	//提供事件中心
	 	var hub = new Vue();

	 	Vue.component('test-tom', {
	 		data: function () {
	 			return {
	 				num: 0
	 			}
	 		},
	 		template: `
				<div>
					<div>Tom:{{num}}</div>
					<div>
						<button @click='handle'>点击</button>
					</div>
				</div>
	 		`,
	 		methods: {
	 			handle: function () {
	 				//触发监听的兄弟组件的事件
	 				hub.$emit('jerry-event', 1);
	 			}
	 		},
	 		mounted: function () {
	 			//代表模板已经就绪
	 			//监听事件
	 			hub.$on('tom-event', (val) => {
	 				this.num += val;
	 			})
	 		}
	 	});
	 	Vue.component('test-jerry', {
	 		data: function () {
	 			return {
	 				num: 0
	 			}
	 		},
	 		template: `
				<div>
					<div>Jerry:{{num}}</div>
					<div>
						<button @click='handle'>点击</button>
					</div>
				</div>
	 		`,
	 		methods: {
	 			handle: function () {
	 				hub.$emit('tom-event', 2);
	 			}
	 		},
	 		mounted: function () {
	 			//代表模板已经就绪
	 			//监听事件
	 			hub.$on('jerry-event', (val) => {
	 				this.num += val;
	 			})
	 		}
	 	});
	 	var vm = new Vue({
	 		el: '#app',
	 		data: {

	 		},
	 		methods: {
	 			handle: function () {
	 				hub.$off('tom-event');
	 				hub.$off('jerry-event');
	 			}
	 		}
	 	})
	 </script>
</body>
</html>

组件插槽

作用：父组件向子组件传递内容（这里的内容是模板的内容）
在这里插入图片描述
组件插槽基本用法
插槽位置：

插槽内容

<div id="app">
		<alert-box>有bug发生</alert-box>
		<alert-box>有一个警告</alert-box>
		<alert-box></alert-box>
	</div>
	<script src="js/vue.js"></script>
	<script>
		Vue.component('alert-box', {
			template: `
				<div>
					<strong>ERROR:</strong>
					<slot>默认内容</slot>
				</div>
			`
		});
		var vm = new Vue({
			el: '#app',
			data: {

			}
		})
	</script>

具名插槽用法
在这里插入图片描述
作用域插槽
应用场景: 父组件对子组件的内容进行加工处理