vm.$props, vm.$attrs, vm.$listeners 的理解

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

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

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了 Vue 实例的 $props, $attrs 和 $listeners 属性的用法。$props 代理了接收的 prop 对象，$attrs 包含未声明为 prop 的父作用域绑定，$listeners 包含父作用域的事件监听器，适用于构建高级组件。这三个属性对于理解和传递组件间的数据及事件至关重要。" 104559599,7448385,位操作符详解：设置位为1或0,"['编程', '计算机科学', '逻辑运算', '数据处理']

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

vm.$props
当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问
ps:props 里声明了继承下来的内容

vm.$attrs
包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用
ps:只包括没 props 的内容

vm.$listeners
包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用
ps:绑定的方法(v-on: @) html中大写无效, 模板中大小写[-]全部保留

参考资料[https://cn.vuejs.org/]

<!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>关于 vm.$props, vm.$attrs, vm.$listeners 的理解</title>
		<style></style>
	</head>

	<body>

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

		<script type="text/x-template" id="box-template">
			<c-a @onFunA1="funA1" @on-fun-a1="funA1" @onfuna1="funA1" :box1="box1" :box2="box2"></c-a>
		</script>
		<script type="text/x-template" id="cA-template">
			<div>
				<div>$props props 里声明了继承下来的内容</div>
				<div>$attrs 只包括没 props 的内容</div>
				<div>$listeners 绑定的方法(v-on: @) html中大写无效, 模板中大小写[-]全部保留</div>
			</div>
		</script>

		<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
		<script type="text/javascript">
			var cA = {
				template: "#cA-template",
				props: ["box1"],
				created() {
					this.$emit("onFunA1");
					console.log(this.$props)
					console.log(this.$attrs)
					console.log(this.$listeners)
				},
			};
			var box = {
				template: "#box-template",
				data() {
					return {
						box1: "box1box1",
						box2: "box2box2",
					}
				},
				components: {
					"c-a": cA
				},
				methods: {
					funA1() {
						console.log("funA1")
					},
				},
			};
			var vu = new Vue({
				el: "#swq",
				components: {
					box: box
				},
			})
		</script>
	</body>

</html>

end