需求: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>);},
});
页面效果: