Vue --事件委托

最新推荐文章于 2024-09-30 03:35:25 发布

能不写代码嘛

最新推荐文章于 2024-09-30 03:35:25 发布

阅读量1.3k

点赞数

分类专栏：实例

本文链接：https://blog.csdn.net/q_17600689511/article/details/94383873

版权

实例专栏收录该内容

41 篇文章 0 订阅

订阅专栏

前端代码

简述：
if(event.target.title == “edit”){ //如果点击到了edit
let id = evenr.target.dataset.id;
//拿着id参数执行着相关的操作
}
利用target获取相关参数传递给一个方法进行执行
好像和后端的有点区别，不是很懂先记下了

<ul>
	<li v-for="(item, index) in data" @click="handleClick(index)">
    	Click Me
	</li>
</ul>

然后这样的话，结果就是所有的li元素都绑定了事件。
过多的事件对于性能来说是很糟糕的，可以说是无法容忍。

<body>
<div id="app">
	<my-component></my-component>
 </div>
<script src="./vue.js"></script>
 <script>
 let component = {
 	 template: `
    <ul @click="handleClick">
      <li v-for="(item, index) in data" :data-index="index">
        {{ item.text }}
      </li>
    </ul>
  `,
  data() {
    return {
      data: [
        {
          id: 0,
          text: '0',
        },
        {
          id: 1,
          text: '1',
        },
        {
          id: 2,
          text: '2',
        }
      ]
    }
  },
  methods: {
    handleClick(e) {
      // 多谢 `@微醺岁月` 提醒，要过滤掉ul，不然会出问题
      if (e.target.nodeName.toLowerCase() === 'li') {
        const index = parseInt(e.target.dataset.index)
        // 获得引索后，只需要修改data数据就能改变UI了
        this.doSomething(index)
      }
    },
    doSomething(index) {
      // do what you want
      alert(index)
    }
  }
}

new Vue({
  el: '#app',
  components: {
    'my-component': component
  }
})

通过在li元素中额外加一个data-index就可以实现委托啦~