手机网站列表模板,网站建设背景朝阳,结合实际,网站设计难吗需求#xff1a;Vue3 setup 父组件向子组件传值#xff0c;子组件接收父组件传入的值#xff1b;子组件向父组件传值#xff0c;父组件接收的子组件传递的值。
父组件#xff1a;parent.tsx#xff1a;
import { defineComponent, ref, reactive } from vue;
import To…需求Vue3 setup 父组件向子组件传值子组件接收父组件传入的值子组件向父组件传值父组件接收的子组件传递的值。
父组件parent.tsx
import { defineComponent, ref, reactive } from vue;
import TotalPreview from ./components/TotalPreviewexport 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 () (divh1父组件接收的子组件传递的值{childNum.num}/h1TotalPreview 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 () (divh1{父组件传递给子组件的值parentNum.value}/h1h1{子组件显示count值count.value}/h1Button onClick{onclick}点击按钮改变子组件的值并向父组件传值/Button/div);},
});页面效果
