Subscribe on changes!

props传值,子组件不渲染。

avatar
Jul 28th 2022

Vue version

3.4.5

Link to minimal reproduction

//

Steps to reproduce

1.定义类型 type State = { selectedItem?: { index: number; item: Record<string, any>}; } 2.定义reactive变量
const state = reactive({});

3.导出 return { ...toRefs(state), };

4.使用

5.子组件使用 const Props = { selectedItem: { type: Number, default: () => ({ index: 0, item: {}, }), }, };

{{ selectedItem.index }}

// 结果一直显示为0

我设置了初始值下面的就好了 const state = reactive({ selectedItem:{ index: 0 }}); // it's working

What is expected?

子组件不渲染

What is actually happening?

是的

System Info

System:
    OS: macOS 12.4
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 81.78 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 14.17.5 - /usr/local/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 6.14.14 - /usr/local/bin/npm
  Browsers:
    Chrome: 103.0.5060.134
    Chrome Canary: 106.0.5206.0
    Safari: 15.5
  npmPackages:
    vue: ^3.2.6 => 3.2.37

Any additional comments?

单前父组件能渲染

avatar
Jul 28th 2022

Can you provide an example on playground?

avatar
Aug 3rd 2022

你初始定义的是 reactive({}), 空对象根本 ...toRefs(state) 不出来的 selectedItem , 页面上是 undefined ,子组件肯定不会响应渲染