Vue3中的组件学习使用

1.组件的使用

当创建出Vue项目时，我们就已经有了一组件HelloWorld，我这里简化一下

在App.Vue中的使用

使用的几个关键点就是import,以及注册

• 父子组件

  • App.vue对于HelloWorld组件来说就是父组件，自己就是子组件

• 全局注册和局部注册

  • 组件在当前Vue应用全局可用

    • import { createApp } from 'vue'
      import App from './App.vue'
      import HelloWorld from "@/components/HelloWorld";
      App.component('HelloWorld', HelloWorld)
      createApp(App).mount('#app')
      

  • 局部注册，只能在父组件中使用

    • 参考上面

2.组件之间的传参

父组件传子组件

子组件需要显式声明需要传入的props

举例

然后父组件就可以通过msg="Welcome to Your Vue.js App" 传参，或者可以传动态的:msg=message

• 传不同类型的数据

  • Boolean

  • Array

  • Object

• 对于父组件传来的值，子组件可以进行校验

  • Vue 组件可以更细致地声明对传入的 props 的校验要求。比如我们上面已经看到过的类型声明，如果传入的值不满足类型要求，Vue 会在浏览器控制台中抛出警告来提醒使用者。这在开发给其他开发者使用的组件时非常有用。

  • 下面是一些参数类型校验实例

    • props: {
          msg: {
            type: String,
            default: 'Hello',
            required:true
          },
          book:{
            type:Object,
            default(){
              return{
                book:{
                  id:1,
                  name:"新华字典"
                }
              }
            },
            required: false
          },
          list:{
            type:Array,
            default() {
              return undefined;
            }
          }
        }
      }
      

子组件传父组件

子组件有时候也需要向父组件传参，这时候我们可以通过事件监听达到目的

举例子

父组件通过监听事件的发生来获取数据

3.插槽的使用

这是组件的一种使用，先来定义一个组件

这里的是插槽的出口，也就是我们需要填的坑，再来看看在父组件中怎么填

按钮

  
>按钮

然后有一个组件中有多个插槽的这种情况，我们的解决方案是具名插槽，简单来说，就是加个名字

父组件中的使用

还有缩写形式

当一个组件同时接收默认插槽和具名插槽时，所有位于顶级的非