Vue3组件中的defineProps 组件之间传值、defineEmits 子组件向父组件事件传递、defineExpose子组件暴露自己的属性的用法

注：代码码和内容的使用都是在setup中，未使用TS。

defineProps 组件之间传值

// 父组件
<template>
  <Child :val="val"></Child>
</template>

//子组件
const props = defineProps({
  val: {
    type: String,
    default: ""
  }
});

defineEmits 子组件向父组件事件传递

//子组件
<template>
  <div class="base-company-canteen-select">
    <el-select v-model="selectedCompany" placeholder="选择公司" clearable @change="handleCompanyChange">
      <el-option value="公司1"></el-option>
      <el-option value="公司2"></el-option>
    </el-select>
    <el-divider direction="vertical"/>
    <el-select v-model="selectedCanteen" placeholder="选择食堂" clearable @change="handleCanteenChange">
      <el-option value="餐厅1"></el-option>
      <el-option value="餐厅2"></el-option>
      <el-option value="餐厅3"></el-option>
    </el-select>
  </div>
</template>
<script setup>
import { ref } from 'vue'

const emits = defineEmits(['company-change', 'canteen-change'])

const props = defineProps({
  company: {  
    type: String,
    default: '',
  },
  canteen: {
    type: String,
    default: '',
  },
  clearable: {
    type: Boolean,
    default: true,
  },
})

const selectedCompany = ref(props.company)
const selectedCanteen = ref(props.canteen)

function handleCompanyChange(e) {
  console.log('选择公司：', e)
  emits('company-change', e)
}

function handleCanteenChange(e) {
  console.log('选择食堂：', e)
  emits('canteen-change', e)
}

</script>


//父组件
      <BaseCompanyCanteenSelect 
        class="search-group-item"
        :company="query.value3"
        @company-change="事件名称"
         @canteen-change="事件名称1"
        clearable>
      </BaseCompanyCanteenSelect>
      <script setup>
      const query = ref({ 
		  value3: null, 
		})
		function 事件名称(e) {
		  console.log( e) 
		}
</script >


//把组件挂载到全局，就不需要全局导入了
import BaseCompanyCanteenSelect from '@/components/BaseCompanyCanteenSelect.vue'
const importComponents = Vue => {
 /**
   * 联动选择
   * <BaseCompanyCateenSelect
   *      :company="string"
   *     :canteen="string"
   *     @reset="handleReset"
   *     @search="handleSearch"
   * ></BaseCompanyCateenSelect>
   */
  Vue.component('BaseCompanyCanteenSelect', BaseCompanyCanteenSelect)
}
export default importComponents


//在入口文件引入   min.js
import importComponents from '@/components'
/**
 * 全局注册组件
 */
importComponents(app)

defineExpose 子组件暴露自己的属性

// 父组件
<template>
  <Child ref="childExpose"></Child>
  <button @click="handelcount">子组件暴露</button>
</template>
<script>
   const childExpose = ref();
   const handelcount = () => {
     console.log(childExpose.value.count);
   };
</script>
 
// 子组件
<script>
   defineExpose({
     count: 1
   })
</script>