Vue3 セットアップ tsx 子コンポーネントが値の出力を親コンポーネントに渡します

要件:Vue3 setup親コンポーネントは子コンポーネントに値を渡し、子コンポーネントは親コンポーネントによって渡された値を受け取ります。子コンポーネントは親コンポーネントに値を渡し、親コンポーネントは子コンポーネントによって渡された値を受け取ります。 。

親コンポーネント: parent.tsx:

import {
    
     defineComponent, ref, reactive } from 'vue';
import TotalPreview from './components/TotalPreview'

export default defineComponent({
    
    
  name: 'parent',
  components: {
    
     TotalPreview },
  setup() {
    
    
    const count = ref(123);
    const childNum = reactive({
    
     num: 1 });
    const onChildClick = (val: any) => {
    
    
      childNum.num = val;
      console.log('childNum',childNum); // 打印子组件向父组件传递的值
    };
    return () => (
      <>
        <div>
          <h1>父组件接收的子组件传递的值：{
    
    childNum.num}</h1>
          <TotalPreview num={
    
    count.value} onNumClick={
    
    onChildClick} />
        </div>
      </>
    );
  },
});

サブコンポーネント: TotalPreview.tsx:

import {
    
     defineComponent, ref } from 'vue';
import {
    
     Button } from 'ant-design-vue';

export default defineComponent({
    
    
  name: 'Child',
  props: {
    
     num: Number },
  emits: ["numClick"],
  setup(props, {
     
      emit }) {
    
    
    const parentNum = ref(props.num)
    const count = ref(1);
    const onclick = () => {
    
    
      count.value++
      // emit 子组件向父组件传值
      emit('numClick', count.value);
    }

    return () => (
      <div>
        <h1>{
    
    '父组件传递给子组件的值：'+parentNum.value}</h1>
        <h1>{
    
    '子组件显示count值：'+count.value}</h1>
        <Button onClick={
    
    onclick}>点击按钮改变子组件的值，并向父组件传值</Button>
      </div>
    );
  },
});

ページ効果: