如何向Vue子组件传递绑定变量？

你当前的写法里，data="data"其实是把**字符串"data"**传递给了子组件，而不是父组件data选项里定义的那个data对象。要传递响应式的组件变量给子组件，需要用到Vue的v-bind指令（或者它的简写语法:）。

第一步：修改父组件的模板绑定 #

把静态的字符串传递改成变量绑定，只需要在prop名前加上:即可：

<template>
  <div id="weather">
    <!-- 使用v-bind简写语法绑定父组件的data变量 -->
    <weather-part class="night" from="0" to="8" :data="data"></weather-part>
    <!-- 如果你习惯写完整语法，也可以这样： -->
    <!-- <weather-part class="night" from="0" to="8" v-bind:data="data"></weather-part> -->
  </div>
</template>

这样修改后，父组件的data变量就会被绑定到子组件的data prop上。当你在mounted钩子中更新this.data时，子组件会自动接收到最新的值——因为Vue的props是响应式的单向数据流。

第二步：确保子组件正确接收props #

为了让子组件能正确处理这个prop，记得在子组件weatherPart.vue中声明对应的props（还可以添加类型检查来避免错误）：

<script>
export default {
  name: 'weatherPart',
  props: {
    // 指定prop的类型，这里是Object，和父组件的data类型对应
    data: {
      type: Object,
      required: true // 如果这个prop是必须的，可以加上这个配置
    },
    // 其他props也可以按需声明类型
    from: {
      type: String, // 或者Number，根据你的业务需求选择
      default: '0'
    },
    to: {
      type: String,
      default: '8'
    }
  }
}
</script>

关键点总结 #

• 区分静态props（直接传字符串、数字字面量）和动态绑定props（用v-bind绑定组件变量）
• 子组件必须声明接收的props，Vue会自动帮你做类型校验和响应式同步
• 当父组件的数据源更新时，子组件的对应prop会自动更新，无需手动处理

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