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

最新推荐文章于 2024-07-05 11:27:33 发布

352328759

最新推荐文章于 2024-07-05 11:27:33 发布

阅读量8.4k

点赞数

分类专栏： Vue 冷知识知识盲区

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

版权

本文介绍了v-bind和v-bind:name的区别。v-bind用于传递键值对，当多个使用时仅最后一个生效，适合用于子组件的props继承。v-bind:name则只传递单一值。在子组件中，$props获取继承的属性，$attrs获取未继承的属性。v-on的使用与v-bind类似，同样遵循后面的值覆盖前面的原则。

摘要由CSDN通过智能技术生成

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