Vue——抽离组件

最新推荐文章于 2025-05-12 22:29:12 发布

原创

最新推荐文章于 2025-05-12 22:29:12 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

本文详细介绍了如何在Vue中进行组件抽离，创建了名为settingZwh.vue的子组件，以及对应的HTML和JS实现。同时，还创建了父组件zwh.vue，并完成了相应的HTML和JS代码。此外，通过一个独立的JS文件模拟了后台数据的传递，展示了父子组件间的数据交互过程。

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

建一个settingZwh.vue文件（子组件）

编写HTML代码

<template>
    <div>
      <img :src="picture" width="2%"/>
      <span>{
  
  {showButton}}</span>
      <van-switch size="24px" class="switchSwitch" v-if!="showButton"/>
    </div>
</template>

编写JS代码

<script>
export default {
  //props： 接收父组件传来的值
  props: {         
    'picture':{default:require('../../public/settings/时间.png')},
    // default：默认值，如果父组件没有传值，则使用默认值
    'Title': { default: "跳转" },
    'showButton':{default:true},

  }
</script>

建一个zwh.vue文件（父组件）

编写HTML代码

<template>
  <div>
    <settingzwh v-for="(item,index) in settingDataList "
    :key="index"
    :picture=item.settingLogo
    :Title=item.allColumnsTitle
    :showButton=item.isTure