一、组件定义和使用

1、全局组件

定义

   

       

This is a global component

   

 

导入

全局组件在main.ts（Vue + TS的项目）引入，

或者在main.js（Vue + JS的项目）引入

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'

import GlobalComponent  from "../src/components/component/GlobalComponent.vue";

const app = createApp(App)

app.component("GlobalComponent",GlobalComponent);

app.use(store).use(router).mount('#app')

 

使用 

全局组件可以在任意组件中使用，不需要再次导入

2、局部组件

定义

导入与使用

二、组件通信

1、props

（1）传递单个值

 

（2）传递多个值

如果传递的时对象，对象在被子组件的props接收时需要解构，依次写在props数组中

 

 传递的如果是一个个的值，则直接在props数组中写入即可

 

2、插槽

插槽的作用：让子组件可以接收父组件传过来的元素、组件

（1）匿名插槽

如果父元素只传递一个元素，或者传递的多个元素会在一个地方使用，那么可以使用匿名插槽

 

 

（2）具名插槽

父组件会传递多个元素，这些元素需要再不同的地方使用，这时需要使用具名插槽进行区分

 

 

 

（3）作用域插槽

父组件需要用到子组件中的数据时，可以使用作用域插槽将子组件的数据传递过去

子组件

   

       

This is a local component

       

   

const list = [1,2,3,4];

 //父组件

 

   

This is a component view

   

     

     

        {{ slotProps.item }}*****{{ slotProps.index }}

     

   

 

//父组件写法二

 

   

This is a component view

   

     

     

        {{ item }}*****{{ index }}

     

   

 

 

3、provide&inject

父组件给子组件传值，子组件使用props接收，如果孙子组件乃至重孙子组件要使用父组件的数据，那么就要一层层用props传递，特别麻烦。

父组件使用provide（提供）提供数据

子组件、孙子组件、重孙子组件....可以使用inject接收数据

//父组件

 

   

 

import LocalComponent from "../components/component/LocalComponent.vue";

import { provide, ref } from "vue";

const msg = ref('hello world');

provide('msg',msg);

 //子组件

   

        LocalComponent

       

   

import GrandChild from '../component/GrandChild.vue';

 //孙子组件

   

       

This is a GrandChild component

        {{ msg }}

   

import { inject } from "vue";

const msg = inject('msg');

4、事件通信

 

三、异步组件