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

最新推荐文章于 2020-12-30 14:58:14 发布

352328759

最新推荐文章于 2020-12-30 14:58:14 发布

阅读量2.1k

点赞数 1

分类专栏：实际应用 Vue

本文链接：https://blog.csdn.net/u013970232/article/details/100050660

版权

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

34 篇文章 1 订阅

订阅专栏

Vue

26 篇文章 1 订阅

订阅专栏

相关阅读:

<!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

352328759

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用vm.$listeners, vm.$attrs实现简易的隔代通讯

相关阅读:v-bind 与 v-bind:name 的区别关于 vm.props,vm.props, vm.props,vm.attrs, vm.$listeners 的理解<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; c...
复制链接

扫一扫