如何在 Vue.js 中将数据从 Test1 组件传递到 Test2 组件？

Posted 2023-02-23

【中文标题】如何在 Vue.js 中将数据从 Test1 组件传递到 Test2 组件？

【英文标题】：How to pass Data from Test1 Component to Test2 Component in Vue.js?

【发布时间】：2020-09-04 05:34:50

【问题描述】：

我有一个名为 Test1.vue 的组件，其中我有一个值总计：120，我希望这个值传递给 Test2.vue？我怎么能这样？

Test1.vue：

    <Test2 v-bind:totalPrice='totalValue'></Test2>
     data() 
        return 
          totalValue: 120,

        ;

      ,

Test2.vue：

    <h3> totali </h3> --> Not working
      props: 
            totalPrice: 
                type: Number,

            
        ,

【参考方案1】：

喜欢

总价格

在 Test2.vue 中，对吧？

【参考方案2】：

尝试通过道具传递你的价值

<Test2 :totalPrice="totalValue"></Test2>

然后使用Test2组件中的props

export default 
   props: 
    totalPrice: 
      type: Number,
    
  

在模板中

<template>
    <h2> totalPrice </h2>
</template>