Vue如何不通过绑定将视图数据传递给模板组件？

先说明你尝试的两种写法无效的原因：

• amount="amount"：Vue模板里不带:的属性会被当作字符串字面量传递，子组件收到的是字符串"amount"，而非父组件的amount变量。
• amount=amount：Vue模板不支持这种裸变量赋值语法，必须通过v-bind:（或简写:）绑定变量，否则会被解析为无效代码。

针对你「子组件的amount仅在finalAmount变化时更新」的核心需求，提供两种可行方案：

方案1：父组件维护快照值，配合finalAmount触发更新 #

在父组件中新增一个变量存储amount的快照，仅当finalAmount变化时才更新这个快照：

// 父组件代码
data() {
  return {
    amount: 0,
    finalAmount: false,
    cachedAmount: 0 // 新增用于存储快照的变量
  }
},
watch: {
  finalAmount(newVal) {
    if (newVal !== false) {
      // 当finalAmount变化时，将当前amount存入快照
      this.cachedAmount = this.amount
    }
  }
}

模板中让子组件绑定这个快照值：

<AmountResult v-if="finalAmount !== false" :amount="cachedAmount" />

这样只有finalAmount变化时，cachedAmount才会更新，子组件的amount只会跟随快照值变动，父组件后续修改amount不会影响子组件。

方案2：子组件内部存储本地副本 #

让子组件在初始化时把prop的值存入自身的data中，后续父组件prop变化不会影响这个本地值，仅当组件通过v-if重新创建时才会重新获取最新值：

// 子组件AmountResult代码
export default {
  props: ['amount'],
  data() {
    return {
      localAmount: this.amount // 将prop值存入本地data
    }
  }
}

子组件内部渲染时使用localAmount代替amount即可。父组件的amount变化时，已存在的子组件不会同步更新；只有v-if重新创建组件时，localAmount才会重新读取父组件当前的amount值。

内容的提问来源于stack exchange，提问作者sparkmix