一、业务场景：

标题上可能有一个或多个按钮，这些按钮对应于不同的响应事件

二.思维：

根据传入的数据长度循环呈现按钮的数量，动态绑定每条数据对应的事件名称

三.包装组件

1.视图级别

2.代码部分

2.1结构件

！-多个按钮组件-title addbtn : addbtnlist=' addbtnlist ' @ clkcall bk=' listencall '/title addbtn 2 . 2 js零件

组件介绍

从“@/components/titleaddbtn”组件注册导入titleaddbtn:

组件： {titleaddbtn}，2.2.2传入数据

data(){ return { addbtnlist :[{ title : ' add 1 '，Icon : ' El-Icon-circle-plus-outline '，methods : ' additional ' }，{title :' add 2 '，Icon : ' El-Icon-circle-plus-outline '，methods : ' additem2 ' }，{ title 3: ' El-Icon-circle-plus-outline '，methods 3: '

标题是按钮上的文本。

图标传入elementui图标部分提供的类名

方法传入父组件中定义的相应按钮的函数方法名

2.2.3监控子组件点击哪个按钮(触发哪个功能)

methods : { listen call(methods words){ console . log(' methods words '，methods words)这个[methods](}，} 2.2.4这个[methodsWords]的动态方法这里指的是数据定义中addBtnList的方法

您还需要添加

方法： { additem(){ console . log(11)}，additem2 () {console.log (112)}，}四。摘要

最后一个this [methodwords]()调用不能写成this[method words]()

动词（verb的缩写）包装的组成部分

template div v-for=' item in addBtnList ' class=' add-BTN ' @ click=' clkCall(item . Methods)' I class=' add-BTN-I ' : class=' item . icon '/I div { { item . title } }/div/div/template script export default { name : ' title addbtn '，prop 3360[' addBtnList ']，Methods : { clkCall(Methods word){ this。$ emit ('clkcallbk '，methods words)}}/script上面这个VUE v-for循环中每个项节点动态绑定不同函数的例子，就是边肖和大家分享的全部内容。希望能给大家一个参考，多支持我们。