关于数据传递和接收的两种方式?

作者站长头像
站长
· 阅读数 21

在跟着开源项目学习的时候发现作者用的是第二种方式,感觉通过参数传递会更简洁些,但是作者是通过自定义属性的方式,不太理解,有解释一下的吗?

<template>
  <div>
    <button @click="NavChange('index')">首页</button>
    <button @click="NavChange('search')">会员专区</button>
    <button @click="NavChange('cases')">组件模板</button>
    <button @click="NavChange('news')">文章资讯</button>
    <button @click="NavChange('me')">个人中心</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      PageCur: 'index'
    };
  },
  methods: {
    NavChange(cur) {
      this.PageCur = cur;
    }
  }
};
</script>
<template>
  <view>
    <button @click="NavChange" data-cur="index">首页</button>
    <button @click="NavChange" data-cur="search">会员专区</button>
    <button @click="NavChange" data-cur="cases">组件模板</button>
    <button @click="NavChange" data-cur="news">文章资讯</button>
    <button @click="NavChange" data-cur="me">个人中心</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        PageCur: 'index'
      };
    },
    methods: {
      NavChange(event) {
        this.PageCur = event.currentTarget.dataset.cur;
      }
    }
  }
</script>

在跟着开源项目学习的时候发现作者用的是第二张方式,感觉通过参数传递会更简洁些,但是作者是通过自定义属性的方式,不太理解,有解释一下的吗?

下面是作者的原代码关于数据传递和接收的两种方式?

关于数据传递和接收的两种方式?

回复
1个回答
avatar
test
2024-07-01

vue里,如果事件回调不是一个函数的句柄,而是一个表达式/语句,那么vue在解析的时候会生成一个匿名函数包裹比如<button @click="NavChange('index')">首页</button>这段实际上会被视为<button @click="$event => NavChange('index')">首页</button>,所以如果这样类似的事件回调比较多的时候,每个都会创建一个匿名函数,区别只是传参不一样,相当于是额外的开销,所以可以考虑将参数绑在dom上,从dom上去获取参数,减少匿名函数的创建。不过在实际中一般也不会有大量这种使用,影响不大。更多还是风格化/个人喜好问题。answer image

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容