vue动态传参方法,vue自定义组件传值
这篇文章主要介绍了某视频剪辑软件如何自定义事件传参，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
自定义事件传参先来简单看个例子自定义事件的$事件传参问题原生某视频剪辑软件里的$事件自定义事件里的$事件
自定义事件传参
先来简单看个例子
TodoList.vue:
模板
保险商实验所
里
待办事项
v-for=列表中的项目：key=item.id
:status= donelist。包括(项目。id)
:info=item
@click=changeStatus0
/todo-item
/李
里
待办事项
v-for=列表中的项目：key=item.id
:status= donelist。包括(项目。id)
:info=item
@click=changeStatus1()
/todo-item
/李
里
待办事项
v-for=列表中的项目：key=item.id
:status= donelist。包括(项目。id)
:info=item
@click=changeStatus2(item)
/todo-item
/李
里
待办事项
v-for=列表中的项目：key=item.id
:status= donelist。包括(项目。id)
:info=item
@ click= change status 3(arguments，item)
/todo-item
/李
/ul
/模板
脚本
从导入到项目 TodoItem
导出默认值{
名称： TodoList ，
组件：{
托多伊泰姆
},
data () {
返回{
列表：[
{
id: 0，
名称：零，
desc:”零零零"
},
{
id: 1，
姓名：一，
desc:”一对一"
},
{
id: 2，
姓名：二，
desc:”二二二"
}
],
完成列表：[1]
}
},
方法：{
changeStatus0 (val，obj) {
控制台。日志(瓦尔)
console.log(obj)
},
changeStatus1 (val) {
控制台。日志(瓦尔)
},
changeStatus2 (obj) {
console.log(obj)
},
changeStatus3 (arr，obj) {
console.log(arr)
const val=arr[0]
if (val) {
常量索引=this。donelist。(对象的索引。id)
this.doneList.splice(索引，1)
}否则{
this.doneList.push(obj.id)
}
}
}
}
/脚本
TodoItem.vue:
模板
label @click=changeStatus
span { { info。name } }:{ { status } }/span
/标签
/模板
脚本
导出默认值{
名称： TodoItem ，
道具：{
状态：{
类型：布尔型，
默认值：错误
},
信息：{
类型：对象，
默认(){
返回{}
}
}
},
方法：{
changeStatus () {
这个emit(click ，this.status，this.info)
}
}
}
/脚本
更改状态0打印的是TodoItem.vue中$emit后跟的两个参数106 .改变现状一打印的是未定义。变更状态2打印的是迭代循环中的当前项目对象106 .改变现状3中到达)参数对应$emit后跟的两个参数，项目参数对应迭代循环中的当前项目对象，注意模板中的写法@ click= change status 3(arguments，item)，按照变更状态3的方式可以实现多种方式的混合传参。
自定义事件的$event传参问题
1.$事件是某视频剪辑软件提供的特殊变量，用来表示原生的事件参数对象事件
在原生事件中，$事件是事件对象可以点出来属性
2.在原生事件中，$事件是事件对象，在自定义事件中，$事件是传递过来的数据（参数)
在自定义事件中，$事件是传递过来的数据
原生vue里的$event
滕帕尔特
button @click="getEvent($event)"点击/按钮
/模板
脚本
导出默认值{
方法：{
getEvent(e) {
console.log(e)
//e。目标是你当前点击的元素
//e.currentTarget是你绑定事件的元素
#获得点击元素的前一个元素
e。当前目标。previouselementsibling。内容
#获得点击元素的第一个子元素
e。当前目标
# 获得点击元素的下一个元素
e。当前目标。nextelementsibling
# 获得点击元素中编号为线的元素
e。当前目标。getelementbyid( string )
# 获得点击元素的线属性
e。当前目标。getattributenode( string )
# 获得点击元素的父级元素
e。当前目标。父元素
# 获得点击元素的前一个元素的第一个子元素的超文本标记语言值
e。当前目标。previouselementsibling。第一个元素child。内容
},
}
}
/脚本
自定义事件里的$event
子组件传值
导出默认值{
方法：{
customEvent() {
这个发出(自定义事件，值)
}
}
}
父组件
接收自定义事件
模板
差异
列表@ custom-event= customEvent(index，$event)"中的my-item v-for=(项目，索引)
/我的列表
/div
/模板
接收$事件
导出默认值{
方法：{
e就是接收过来的$事件现在他就是子组件传过来的值不再是对象事件
customEvent(index，e) {
console.log(e) //某个值
}
}
}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。