无法根据另一个组件的状态获取要呈现的组件的复选框

// ParentComponent.js
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [isChecked, setIsChecked] = useState(false);

  return (
    <div>
      <button onClick={() => setIsChecked(!isChecked)}>Toggle Check</button>
      <ChildComponent isChecked={isChecked} />
    </div>
  );
}

export default ParentComponent;

// ChildComponent.js
import React from 'react';

function ChildComponent({ isChecked }) {
  return (
    <div>
      <input type="checkbox" checked={isChecked} readOnly />
    </div>
  );
}

export default ChildComponent;

<!-- ParentComponent.vue -->
<template>
  <div>
    <button @click="toggleCheck">Toggle Check</button>
    <ChildComponent :is-checked="isChecked" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      isChecked: false
    };
  },
  methods: {
    toggleCheck() {
      this.isChecked = !this.isChecked;
    }
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <input type="checkbox" :checked="isChecked" readonly />
  </div>
</template>

<script>
export default {
  props: {
    isChecked: Boolean
  }
};
</script>