vue2.6.0+新增加的属性和方法名动态参数的写法

最新推荐文章于 2024-09-13 00:15:37 发布

原创最新推荐文章于 2024-09-13 00:15:37 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

vue 专栏收录该内容

104 篇文章

订阅专栏

本文深入探讨Vue.js中动态属性和事件的使用方法，包括v-bind动态绑定、自定义属性及动态事件触发，通过实例讲解如何在子组件中触发事件并传递给父组件。

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

以往我们在vue中绑定一个dom元素的属性的时候使用 v-bind

<body>
	<div id="app">
		<p v-bind:title="msg">鼠标秒上来看看</p>
	</div>
</body>
<script type="text/javascript">
	var vm=new Vue({
		el:"#app",
		data:{
			msg:"看到我了吧",
		},
		methods:{
			
		}
	})
</script>

当然也有简写方式，把v-bind去掉就可以了

<p :title="msg">鼠标秒上来看看</p>

如果我们平常用到的数据可能不会绑定在自带的属性中怕无意中修改和破坏元素自己的东西，我们就可以自定义一个属性，但是要自定义的属性每个都要绑定这个时候如果手写出来的话可能就有点麻烦了。

2.6新增加了一种动态的属性写法可以给dom元素加一个自定义的动态变化的属性
写法是 v-bind:[属性名]=“” 是不是有种angular的感觉哈
动态的属性名提起也在 data中定义好

<div id="app">
	<p v-bind:[title]="msg">鼠标秒上来看看</p>
</div>
data:{
	msg:"看到我了吧",
	title:"ps"
},
// 简写方式 一样
<p :[title]="msg">鼠标秒上来看看</p>

方法和属性的几乎是一样的但是说实话自定义的动态事件好像用的也不多，你要出发自定义的事件在vue中使用 $emit $on 配合触发和监听
动态参数属性的可能会用到但是方法的这个属实用到会不多仅作了解吧
// 页面输出一个 hello world
下面我是结合了子往父组件传惨为例子触发下动态参数

<body>
		<div id="app">
			<child @[chufa]="parent"></child>
		</div>
	</body>
	<script type="text/javascript">
		Vue.component('child',{
			template:"<button @click='send'>点击</button>",
			methods:{
				send(){
					this.$emit('change');
				}
			}
		})
		var vm=new Vue({
			el:"#app",
			data:{
				chufa:"change"
			},
			methods:{
				parent(){
					console.log("hello world");
				},
			}
		})
	</script>