vue同一个组件设置不同的点击的事件/具体某一模块也可以设置不同的点击事件

4 15 20 1C

已于 2022-04-08 15:09:49 修改

阅读量341

点赞数

CC 4.0 BY-SA版权

文章标签： html 前端

于 2022-03-17 16:43:41 首次发布

本文链接：https://blog.csdn.net/M40153c/article/details/123554279

该博客介绍了如何在Vue中通过父组件向子组件传递数据并绑定不同点击事件，以实现同一组件的不同实例有不同的行为。通过在父组件中使用`v-for`循环和动态属性，将每个卡片组件的点击事件与不同的URL关联，然后在子组件内部监听点击事件，调用`uni.navigateTo`进行页面跳转。这种方法适用于需要为多个相似组件设置个性化交互的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有些时候我们想给相同组件传不同的点击事件或想给组件具体某一个模块传不同的点击事件

可以用到以下方法

父组件：

<view>
      <block v-for="(item, idx) in mycard" :key="idx">
        <Card :item="item"></Card>
      </block>
    </view>

页面数据

 
 data() {
    return {
    mycard: [
        {
          icon: "/static/icon1.png",
          txt: "绑定社区",
          school: "动感小学",
          right: "/static/iconright.png",
          url: "/pages/jump/community",
        },
        {
          icon: "/static/icon2.png",
          txt: "我的课程",
          school: "",
          right: "/static/iconright.png",
          url: "/pages/jump/course",
        },
    ]
  }
}

子组件：

<view class="index-card" @click="clickcard">
</view

export default {
  name: "card",
  props: {
    item: {},
  },

  data() {
    return {};
  },

  methods: {
    clickcard() {    
        uni.navigateTo({
          url: this.item.url,
        });
    },
  },
};