Vue3 注册组件、组件通信

一、如何在Vue3 中注册组件？

1. 在语法糖​​<script setup>​​中，只需引入组件即可，不需要注册。
2. 在非语法糖中，有两种方式来注册组件：

// 1. 使用 defineComponent 局部注册
import {defineComponent} from 'vue';
import HelloWorld from '@/components/HelloWorld.vue';
export default defineComponent({name:'App',component:{HelloWorld}})

// 2. 使用异步注册组件
import {defineComponent,defineAsyncComponent} from 'vue'
export default defineComponent({
  name:'App',
  components: {
    HelloWorld:defineAsyncComponent(()=>import('./components/HelloWorld.vue'))
  }
})

二、组件通信

（一） 父传子

// 1.子组件接受父组件传过来的值
 
const porps = defineProps({
  currentPage: {
    type: Number,
    default: 1
  },
  total: {
    type: Number,
    default: 0
  },
  isDisable: {
    type: Boolean,
    default: false
  }
})
 
 
// 2.子组件触发父组件的方法
 
 
const emit = defineEmits(["back", 'go']);
 
const go:() => void = () => {
  emit('go', porps.currentPage+1)
}
const back:() => void = () => {
  emit('back', porps.currentPage-1)
}
 
 
// 3.在父组件中使用
 
<Page :currentPage="currentPage" @go="go" @back ="back" :total="total" :isDisable="isDisable"/>

（二）子传父

// 父组件
 
<Page ref="childPage"/>
 
<script lang="ts" setup>
const childPage = ref('');
childPage.value.childPage = 20
childPage.value.childFuction(console.log('父组件的child'))
</script>
 
 
// 子组件
 
const childNumber = 10
const childFuction = ()=>{
    console.log('子组件的child')
}
// 父子组件传方法使用defineExpose和defineEmits都行。
defineExpose({ child,childNumber })