vue3中父子传值 defineProps和defineEmits用法

vue3中父子组件传值

//父组件
<template>
  <Tab
      :page="page"    //传递值
      @pageFn="pageFn"  //传递方法
  ></Tab>
</template>

<script setup>
import Tab from "../../components/freight/Tab.vue";
import { ref, reactive, toRefs, onMounted } from "vue";

const page=ref(1)
const pageFn=(val)=>{
    page.value=val
}
</script>

//子组件
<template>
  <button @click="butFn">改变page值:{{page}}</button>
</template>

<script setup>
import { ref, reactive, toRefs, defineProps, defineEmits } from "vue";
defineProps(["page"]);  //接收父组件传来的值
const emit = defineEmits(["pageFn"]);   //定义一个变量来接收父组件传来的方法

const butFn=()=>{
    emit("pageFn",5)
}
</script>

这个时候页面就会从 变成

vue3父组件传值注意点

子组件接收父组件值的有三种方式

defineProps的用法

//第一种
defineProps(["page"]);
//第二种 
defineProps({
  page:Number
});
//第三种
defineProps({
  page:{
    type:Number,
    default:2
  }
});
//第四种
defineProps:{
  page:[String,Number]
}

第二种方式可以设置传来值的类型

第三种方式可以设置传来值的类型和默认值

第四种方式可以设置传来值的多种类型

defineEmits的用法 defineEmits的用法是在子组件中定义接收父组件传过来的方法

<script setup>
import { ref, reactive, toRefs, defineProps, defineEmits } from "vue";
const emit = defineEmits(["pageFn"]);  //pageFn父组件传来的方法
//传给父组件的值的方法
const btnFn=()=>{
    emit('pageFn',1111)
}
</style>