Vue.js父组件向子组件传对象问题：TreeNode组件Model始终为默认值

嘿，我来帮你捋捋这个问题！这种子组件接收不到父组件传递的对象、始终卡着默认值的情况，在Vue开发里太常见了，大概率是这几个环节出了问题，咱们一步步排查：

首先得确保你的TreeNode组件，确实正确声明了要接收的props，尤其是对象类型的默认值必须用工厂函数返回——这是很多人容易踩的坑，直接写对象会导致所有组件实例共享同一个默认对象，而且可能影响父组件传值的覆盖逻辑。

举个正确的例子：

<script setup>
// TreeNode.vue
const props = defineProps({
  // 假设你传递的对象叫 nodeModel
  nodeModel: {
    type: Object,
    required: false, // 如果父组件必须传，就设为true，还能帮你排查漏传问题
    default: () => ({ 
      title: '默认标题',
      expand: false
    }) // 对象/数组默认值必须用工厂函数返回
  }
})
</script>

父组件传递动态对象时，必须用v-bind（简写:），如果直接写字符串形式，子组件会把它当成普通字符串而非对象，自然只会用默认值。

❌ 错误写法：

<ComponentA>
  <TreeNode nodeModel="{ title: '父组件传的标题' }" />
</ComponentA>

✅ 正确写法：

<template>
  <ComponentA>
    <!-- 用:绑定响应式对象 -->
    <TreeNode :nodeModel="parentNodeModel" />
  </ComponentA>
</template>

<script setup>
import { ref } from 'vue'
// 父组件里的响应式对象
const parentNodeModel = ref({
  title: '父组件传递的节点数据',
  expand: true
})
</script>

如果你的父组件对象是异步获取的（比如接口请求后赋值），一定要确保它是响应式的，否则Vue无法感知数据变化，子组件也不会更新。

❌ 错误写法（非响应式赋值）：

let parentNodeModel = {}
// 异步请求后直接替换引用，Vue追踪不到
async function fetchData() {
  const res = await api.getNodeData()
  parentNodeModel = res.data
}

✅ 正确写法（用ref/reactive做响应式）：

const parentNodeModel = ref({})
async function fetchData() {
  const res = await api.getNodeData()
  // 给ref的value赋值，Vue能追踪到变化
  parentNodeModel.value = res.data
}

子组件里要直接用props.nodeModel（setup语法糖）或者this.nodeModel（Options API），不要自己在data里声明一个变量然后只赋值一次——如果子组件需要修改这个对象，记得遵循Vue的单向数据流规则：要么深拷贝到本地响应式数据，要么通过emit通知父组件修改。

比如子组件需要本地修改的场景：

<script setup>
import { ref, watch } from 'vue'
const props = defineProps(['nodeModel'])
// 深拷贝props到本地，避免直接修改props
const localModel = ref({ ...props.nodeModel })

// 监听父组件传入的props变化，同步本地数据
watch(props.nodeModel, (newVal) => {
  localModel.value = { ...newVal }
}, { deep: true }) // 深层监听对象的属性变化

// 如果要修改，通过emit通知父组件
const updateModel = () => {
  localModel.value.expand = !localModel.value.expand
  defineEmits(['update:nodeModel'])(localModel.value)
}
</script>

别笑，这真的是高频问题：父组件传的是node-model（短横线命名），子组件却写成nodeMdel（拼写错了），或者大小写不一致，都会导致子组件接收不到值，只能用默认值。

父组件：

<template>
  <div>
    <TreeNode :node-model="parentNode" />
    <button @click="updateNode">更新节点数据</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import TreeNode from './TreeNode.vue'

const parentNode = ref({
  title: '初始父节点',
  expand: false
})

const updateNode = () => {
  parentNode.value = {
    title: '更新后的父节点',
    expand: true
  }
}
</script>

子组件TreeNode.vue：

<template>
  <div class="tree-node">
    <h4>{{ nodeModel.title }}</h4>
    <p>展开状态：{{ nodeModel.expand ? '已展开' : '已折叠' }}</p>
  </div>
</template>

<script setup>
const props = defineProps({
  nodeModel: {
    type: Object,
    default: () => ({
      title: '默认节点',
      expand: false
    })
  }
})
</script>

按上面的步骤排查，基本就能解决你的问题啦！

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