[JavaScript知识库]Vue中推荐的传值方式（从html到js)

先准备两个数据

            data:{
				username:"jack",
				password:123123
			}

一、JS原生的传值方式

JS原生的方式就是把参数写在函数的参数里面

<button @click="sendA(username,password)">发送A</button>

在Vue里也用函数的参数接参

                methods:{
					sendA:function(username,password){
						console.log(username+" " +password)
					}
				}

参数很容易就拿到了，但是vue里不推荐使用这种方法

二、dataset传值（Vue推荐使用）

把要传的值绑定到一个属性里，下面绑定的属性是name和pwd，前面要按固定格式加上data-

<button @click="sendB" :data-name="username" :data-pwd="password">发送B</button>

传参数用event事件，接参数用event.srcElement.dataset

1.如果没有参数，可以省略（）

2.event表示触发当前函数的事件（点击事件）

3.event.srcElement?表示发生事件的元素（button）

4.event.srcElement.dataset?表示按钮上绑定的数据集 (data-name和data-pwd)，就是接收值的地方

                    sendB(event){
						console.log(event)
						console.log(event.srcElement.dataset)
					}

三、混合传值

函数里有参数的时候，也可以用event，这时候只要在event前面加$符号

<button @click="sendC(username,password)" :data-nameB="username">发送C</button>

                    sendC(username,password,$event){
						console.log(username);
						console.log(password);
						console.log(event.srcElement.dataset);
						console.log(event.srcElement.dataset.nameb);
					}