vue循环传值组件化

最新推荐文章于 2023-03-10 22:35:14 发布

勘察加熊人

最新推荐文章于 2023-03-10 22:35:14 发布

阅读量438

点赞数

分类专栏： Vue.js 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/cf8833/article/details/121121074

版权

Vue.js 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了如何在Vue.js中进行组件化开发，特别是在循环中传递数据到子组件的步骤，包括step1的基础设置和step2的详细操作，最终实现组件间的有效通信。

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

vue循环传值组件化

step1:

<template>
  <div>
    <v-row>
      <v-col v-for="(item, i)  in tabs"
             :key="i">
        <cabStyle :data="item" :visible="item.visible"></cabStyle>
      </v-col>
    </v-row>
  </div>
</template>
<script>
import cabStyle from"./cabStyle"
export default {
  components:{cabStyle},
  data: () => ({
    loading: false,
    selection: 1,
    tabs: [
      { img: 'https://img0.baidu.com/it/u=2607569900,2340174722&fm=26&fmt=auto&gp=0.jpg', name: '林黛玉', address: '许昌', sex: '女',visible:true },
      { img: 'https://img2.baidu.com/it/u=2707698156,1197503393&fm=26&fmt=auto&gp=0.jpg', name: '贾宝玉', address: '洛阳', sex: '男' },
      { img: 'https://img2.baidu.com/it/u=2799896654,203056062&fm=26&fmt=auto&gp=0.jpg', name: '薛宝钗', address: '长沙', sex: '女' },
      { img: 'https://img2.baidu.com/it/u=1259121030,3733451817&fm=26&fmt=auto&gp=0.jpg', name: '袭人', address: '徐州', sex: '女' }
    ]
  }),
  methods: {
    reserve () {
      this.loading = true
      setTimeout(() => (this.loading = false), 2000)
    },
  },
}
</script>

step2:

<template>

  <v-app>
    <v-main>
      <v-card style="background:#C5CAE9"
              max-width="200">
        <v-img max-height="100"  v-if="visible"
               max-width="100"
               :src="data.img"></v-img>
        <v-card-title>{{data.name}}</v-card-title>
        <v-card-text>{{data.address}}</v-card-text>
        <v-card-text>{{data.sex}}</v-card-text>
      </v-card>
    </v-main>

  </v-app>
</template>

<script>
export default {
  props:["data","visible"],
  data () {
    return {

    };
  },
  mounted () {

  },

  methods: {

  },
};
</script>

<style
    scoped>
</style>

end