V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
fangwenxue
V2EX  ›  问与答

vue3 组件怎么传递变量

  •  
  •   fangwenxue · 2022-01-19 18:25:26 +08:00 · 807 次点击
    这是一个创建于 798 天前的主题,其中的信息可能已经有所发展或是发生改变。
    <div class="tile-content">
       <Progress progressValue="{{item.disk}}" />
    </div>
            
    ### Progress.vue 
    script setup
    defineProps({
      progressValue: String
    })
    const getProgressColor = (v) => {
      console.log(v)
      return (parseInt(v) >= 80 ? 'bg-red-500' : 'bg-blue-500');
    }
    /script
    <template>
      <div class="progress">
        <div class="progress-bar" :class="getProgressColor(progressValue)" :style="{width: progressValue + '%'}"></div>
      </div>
    </template>
    
    • {{item.disk}} 被当成一个字符串了,怎么把 item.disk 的值传给 Progress
    • script 没有 <> 是有这个不让发
    5 条回复    2022-01-20 10:11:58 +08:00
    TomatoYuyuko
        1
    TomatoYuyuko  
       2022-01-19 18:41:20 +08:00
    ?你为什么不直接 item.disk
    fangwenxue
        2
    fangwenxue  
    OP
       2022-01-19 19:13:32 +08:00
    @TomatoYuyuko
    <Progress progressValue="item.disk" /> 这样报错
    Danswerme
        3
    Danswerme  
       2022-01-19 20:08:46 +08:00   ❤️ 1
    <Progress :progressValue="item.disk" />
    dengshen
        4
    dengshen  
       2022-01-19 20:26:01 +08:00 via iPhone
    这是 react 写多了吧?至少看一下 vue 数据绑定部分的文档啊
    TomatoYuyuko
        5
    TomatoYuyuko  
       2022-01-20 10:11:58 +08:00
    @fangwenxue 动态绑定啊。。不加冒号就是静态的值
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5108 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 09:44 · PVG 17:44 · LAX 02:44 · JFK 05:44
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.