vue3注册组件，父子组件通信（语法糖）

最新推荐文章于 2024-08-09 18:48:50 发布

orangewyj

最新推荐文章于 2024-08-09 18:48:50 发布

阅读量1k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/orange995/article/details/124424746

版权

本文介绍了Vue3中组件的注册方式，包括在语法糖`<script lang="ts" setup">`中的自动注册和非语法糖情况下的手动注册。接着详细讲解了父组件向子组件传递值的方法，如props和provide/inject机制。此外，还阐述了子组件如何向父组件通信，通过`defineExpose`暴露属性，并使用`ref`在父组件中接收，类似于Vue2的`$refs`用法。

摘要由CSDN通过智能技术生成

一、注册组件

1.在语法糖中<script lang="ts" setup>：只需要import引入组件即可，不需要注册

2.非语法糖中

//1.使用defineComponent局部注册

important {defineComponent} from 'vue';
import listviewTopVue from '@/components/listviewTop.vue';
export default defineComponent({name:'App',components:{listviewTopVue}})


//2、使用异步注册组件

import {defineComponent,defineAsyncComponent} from 'vue';
export defalut defineComponent({
name:'App',
components:{listviewTopVue:defineAsyncComponent(()=>import('./components/listviewTop.vue'))}
})

二、父传子

1.props传值：

// 1.子组件接受父组件传过来的值

const porps = defineProps({
  currentPage: {
    type: Number,
    default: 1
  },
  total: {
    type: Number,
    default: 0
  },
  isDisable: {
    type: Boolean,
    default: false
  }
})