利用vm.$listeners, vm.$attrs实现简易的隔代通讯

最新推荐文章于 2022-05-20 14:40:02 发布

原创最新推荐文章于 2022-05-20 14:40:02 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

实际应用同时被 2 个专栏收录

34 篇文章

订阅专栏

Vue

26 篇文章

订阅专栏

本文探讨如何利用Vue实例的vm.$listeners和vm.$attrs属性来实现在组件间的隔代通信，结合v-bind的使用，深入理解这些特性在实际开发中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

相关阅读:

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>v-on="$listeners" v-bind="$attrs" v-bind="$props"</title>
		<style>
			.components {
				border: 1px solid #000;
				padding: 30px;
			}
		</style>
	</head>

	<body>

		<div id="swq">
			<box></box>
		</div>

		<script type="text/x-template" id="box-template">
			<div class="components">
				<div>box1:{{box1}}</div>
				<div>box2:{{box2}}</div>
				<c-a @onFunA1="funA1" @onFunA2="funA2" :box1="box1" :box2="box2"></c-a>
			</div>
		</script>
		<script type="text/x-template" id="cA-template">
			<div class="components">
				<div>box1:{{box1}}</div>
				<div @click="playFunA1">play funA1</div>
				<div @click="playFunA2">play funA2</div>
				<c-b v-on="$listeners" v-bind="$attrs"> </c-b>
			</div>
		</script>
		<script type="text/x-template" id="cB-template">
			<div class="components">
				<div>box2:{{box2}}</div>
				<div @click="playFunA1">play funA1</div>
				<div @click="playFunA2">play funA2</div>
				<c-c v-on="$listeners"></c-c>
			</div>
		</script>
		<script type="text/x-template" id="cC-template">
			<div class="components">
				<div @click="playFunA1">play funA1</div>
				<div @click="playFunA2">play funA2</div>
			</div>
		</script>

		<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
		<script type="text/javascript">
			var cC = {
				template: "#cC-template",
				//				inheritAttrs: false,
				methods: {
					playFunA1() {
						this.$emit("onFunA1");
					},
					playFunA2() {
						this.$emit("onFunA2");
					},
				},
			};
			var cB = {
				template: "#cB-template",
				props: ["box2"],
				//				inheritAttrs: false,
				components: {
					"c-c": cC,
				},
				methods: {
					playFunA1() {
						this.$emit("onFunA1");
					},
					playFunA2() {
						this.$emit("onFunA2");
					},
				},
			};
			var cA = {
				template: "#cA-template",
				props: ["box1"],
				components: {
					"c-b": cB,
				},
				methods: {
					playFunA1() {
						this.$emit("onFunA1");
					},
					playFunA2() {
						this.$emit("onFunA2");
					},
				},
			};
			var box = {
				template: "#box-template",
				data() {
					return {
						box1: 1,
						box2: 2,
					}
				},
				components: {
					"c-a": cA
				},
				methods: {
					funA1() {
						this.box1++
					},
					funA2() {
						this.box2++
					},
				},
			};
			var vu = new Vue({
				el: "#swq",
				components: {
					box: box
				},
			})
		</script>
	</body>

</html>

end