v-bind 与 v-bind:name 、v-on与v-on:name的区别

z大太阳

已于 2023-07-24 11:30:54 修改

阅读量152

点赞数

分类专栏： vue2知识点文章标签： javascript 前端 vue.js

于 2022-11-23 16:14:52 首次发布

原文链接：https://blog.csdn.net/u013970232/article/details/100035066

版权

vue2知识点专栏收录该内容

1 篇文章 0 订阅

订阅专栏

v-bind 不能多个同用, 后面的才生效
v-bind=“obj” 传入的是键值对
v-bind:name=“value” 传入的是值

传入键值对时, 子组件可以用 props 继承指定数据
子组件中, $props 取到所有继承数据的集合; $attrs 则取到所有未继承数据的集合
$attrs + $props = v-bind 传入的数据

v-on 是类似的
v-on 不能多个同用, 后面的才生效
v-on=“obj” 传入的是键值对
v-on:name=“value” 传入的是值

<!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-bind 与 v-bind:name 的区别</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>cBobj{{cBobj}}</div>
				<div>cBobj2{{cBobj2}}</div>
				<c-a v-bind="cBobj"></c-a>
				<c-a v-bind="cBobj" v-bind="cBobj2"></c-a>
				<c-b v-on="cBfun"></c-b>
				<c-b v-on="cBfun" v-on="cBfun2"></c-b>
			</div>
		</script>
		<script type="text/x-template" id="cA-template">
			<div class="components">
				<div>$attrs{{$attrs}}</div>
				<div>$props{{$props}}</div>
			</div>
		</script>
		<script type="text/x-template" id="cB-template">
			<div class="components">
				<div>查看console.log()</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: ["b1"],
			};
			var cB = {
				template: "#cB-template",
				mounted() {
					this.$emit("fun1");
				},
			};
			var box = {
				template: "#box-template",
				data() {
					var _this = this
					return {
						cBobj: {
							b1: 1,
							b2: 1,
							b3: 1,
							b4: 1,
						},
						cBobj2: {
							b1: 2,
							b2: 2,
							b3: 2,
							b4: 2,
						},
						cBfun: {
							fun1() {
								console.log("fun1")
							},
							fun2() {
								console.log("fun2")
							},
						},
						cBfun2: {
							fun1() {
								console.log("fun21")
							},
							fun2() {
								console.log("fun22")
							},
						},
					}
				},
				components: {
					"c-a": cA,
					"c-b": cB,
				},
			};
			var vu = new Vue({
				el: "#swq",
				components: {
					box: box
				},
			})
		</script>
	</body>

</html>

借鉴来源：https://blog.csdn.net/u013970232/article/details/100035066

z大太阳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-bind 与 v-bind:name 、v-on与v-on:name的区别

借鉴来源：https://blog.csdn.net/u013970232/article/details/100035066。子组件中, $props 取到所有继承数据的集合;$attrs 则取到所有未继承数据的集合。$attrs + $props = v-bind 传入的数据。传入键值对时, 子组件可以用 props 继承指定数据。
复制链接

扫一扫

专栏目录