| vue3中父子传值 defineProps和defineEmits用法 | 您所在的位置：网站首页 › define两个值 › vue3中父子传值 defineProps和defineEmits用法 |
vue3中父子传值 defineProps和defineEmits用法
|
vue3中父子组件传值
//父组件
import Tab from "../../components/freight/Tab.vue";
import { ref, reactive, toRefs, onMounted } from "vue";
const page=ref(1)
const pageFn=(val)=>{
page.value=val
}
//子组件
改变page值:{{page}}
import { ref, reactive, toRefs, defineProps, defineEmits } from "vue";
defineProps(["page"]); //接收父组件传来的值
const emit = defineEmits(["pageFn"]); //定义一个变量来接收父组件传来的方法
const butFn=()=>{
emit("pageFn",5)
}
这个时候页面就会从 子组件接收父组件值的有三种方式 defineProps的用法 //第一种 defineProps(["page"]); //第二种 defineProps({ page:Number }); //第三种 defineProps({ page:{ type:Number, default:2 } }); //第四种 defineProps:{ page:[String,Number] }第二种方式可以设置传来值的类型 第三种方式可以设置传来值的类型和默认值 第四种方式可以设置传来值的多种类型 defineEmits的用法 defineEmits的用法是在子组件中定义接收父组件传过来的方法 import { ref, reactive, toRefs, defineProps, defineEmits } from "vue"; const emit = defineEmits(["pageFn"]); //pageFn父组件传来的方法 //传给父组件的值的方法 const btnFn=()=>{ emit('pageFn',1111) } |
【本文地址】
公司简介
联系我们