1.props：父子组件、子父组件、兄弟组件通信

props可以实现父子组件通信，在vue3中我们可以通过defineProps获取父组件传递的数据。且组件间不需要引入defineProps方法可以直接使用！

1.1父组件给子组件传值

首先书写父组件代码：

<template>

<child info="我是你爹" :age="age"> </child>

</template>

<script setup lang="ts">
import child from 'child'
import {ref} from 'vue'
let age = 80
</script>

其次是子组件的代码：

<template>
<div>{{info}}</div>
<div>{{money}}</div>
</template>

<script setup lang="ts">
let props  = defineProps(['info','money'])
</script>

第二种写法，有默认类型和默认参数。

  info:{
   type:String,//接受的数据类型
   default:'默认参数',//接受默认数据
  },
  money:{
   type:Number,
   default:0
   }})

在模版中可以省略props代理在ts中需要写出来，这种传值方法是只读的，不可以进行修改。 defineEmits(['xxx'])

2.1子组件给父组件传值：自定义事件 使用defineEmits(['xxx'])

首先父组件引入并使用子组件

<template>
<child @xxx='handler2'></child>
</template> 
<script setup lang="ts"> 
import child from 'child'

const handler2 = (params1,params2)=>{
    //此处使用子组件穿过来的params
    console.log(params1,params2)
}
</script>

子组件的代码：需要先定义defineEmits(['xxx'])

<template>
 <button @click='handler'>点我给父亲传值</button>
</template>

<script setup lang="ts">
let $emit = defineEmits(['xxx']);
const handler =()=>{
    $emit('xxx','ahahahah','heiheihei') //提交第一个参数是事件名 ，后面都是携带的参数
}
</script>

3.1兄弟组件间传值

全局事件总线可以实现任意组件通信，在vue2中可以根据VM与VC关系推出全局事件总线。 但是在vue3中没有Vue构造函数，也就没有Vue.prototype.以及组合式API写法没有this， 那么在Vue3想实现全局事件的总线功能就有点不现实啦，如果想在Vue3中使用全局事件总线功能 可以使用插件mitt实现。 非常类似于pubsub 发布 订阅 先订阅好 等待发布

4.1v-model传值

v-model指令：手机表单数据，数据双向绑定 v-model也可以实现组件之间通信，实现父子组件数据同步业务。 这个v-model就是把defineProps和defineEmits 结合起来 使用父传子到子传父形成数据同步 可以同时绑定多个v-mdoel

//想当于给子组件传递props[modelValue]  第二：相当于给子组件绑定自定义事件update:pageNo
    <child v-model:pageNo="pageNo" v-model:pageSize="pageSize" ></child>
    
    
    
    <script>
    let pageNo = ref(1)
    let pageSize = ref(1)
    
    
    </script>

子组件中配置props和事件回调

let props = defineProps(['pageNo','pageSize'])
let $emit = defineEmits('update:pageNo','update:pageSize')


const handler = ()=>{
    $emit('update:pageNo',props.pageNo+100)
    
}

5.1使用useAttrs方法

和props一样 二者之中props如果声明了接收的值，那么useAttrs就接收不到了、 父组件中间照常写给子组件传值的代码

<child  type='primary' title='编辑'  ></child>

<div :title = "title">
 <el-button :="$attrs"></el-button>
</div>



<script setup lang="ts">
import {useAttrs} from 'vue';
let $attrs = useAttrs();//二者之中props如果声明了接收的值，那么useAttrs就接收不到了、
defineProps(['title']) 
</script>

6.1 ref 和 $parent 加上defineExpose对外暴露来拿到数据进行修改

ref,提及到ref可能会想到它可以获取元素的DOM或者获取子组件实例的VC。既然可以在父组件内部通过ref获取子组件实例VC，那么子组件内部的方法与响应式数据父组件可以使用的。

比如:在父组件挂载完毕获取组件实例

父组件内部代码:

<template>
  <div>
    <h1>ref与$parent</h1>
    <Son ref="son"></Son>
  </div>
</template>
<script setup lang="ts">
import Son from "./Son.vue";
import { onMounted, ref } from "vue";
const son = ref();
onMounted(() => {
  console.log(son.value);
});
</script>

但是需要注意，如果想让父组件获取子组件的数据或者方法需要通过defineExpose对外暴露,因为vue3中组件内部的数据对外“关闭的”，外部不能访问

<script setup lang="ts">
import { ref } from "vue";
//数据
let money = ref(1000);
//方法
const handler = ()=>{
    //方法也可以对外暴露
}
defineExpose({
  money,
   handler
})
</script>

子拿到父亲的数据 $parent可以获取某一个组件的父组件实例VC,因此可以使用父组件内部的数据与方法。必须子组件内部拥有一个按钮点击时候获取父组件实例，当然父组件的数据与方法需要通过defineExpose方法对外暴露

<button @click="handler($parent)">点击我获取父组件实例</button>

8.1祖先组件和孙子组件传值

vue3提供两个方法provide与inject,可以实现隔辈组件传递参数

组件组件提供数据:

provide方法用于提供数据，此方法执需要传递两个参数,分别提供数据的key与提供数据value

<script setup lang="ts">
import {provide} from 'vue'
provide('token','admin_token');
</script>

后代组件可以通过inject方法获取数据,通过key获取存储的数值

<script setup lang="ts">
import {inject} from 'vue'
let token = inject('token');
</script>

8.1pinia

集中式管理状态容器 专门开一章节写

pinia官网:pinia.web3doc.top/

pinia也是集中式管理状态容器,类似于vuex。但是核心概念没有mutation、modules,使用方式参照官网

9.1slot

插槽：默认插槽、具名插槽、作用域插槽可以实现父子组件通信.

默认插槽:

在子组件内部的模板中书写slot全局组件标签

<template>
  <div>
    <slot></slot>
  </div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>

在父组件内部提供结构：Todo即为子组件,在父组件内部使用的时候，在双标签内部书写结构传递给子组件

注意开发项目的时候默认插槽一般只有一个

<Todo>
  <h1>我是默认插槽填充的结构</h1>
</Todo>

具名插槽：

顾名思义，此插槽带有名字在组件内部留多个指定名字的插槽。

下面是一个子组件内部,模板中留两个插槽

<template>
  <div>
    <h1>todo</h1>
    <slot name="a"></slot>
    <slot name="b"></slot>
  </div>
</template>
<script setup lang="ts">
</script>
​
<style scoped>
</style>

父组件内部向指定的具名插槽传递结构。需要注意v-slot：可以替换为#

<template>
  <div>
    <h1>slot</h1>
    <Todo>
      <template v-slot:a>  //可以用#a替换
        <div>填入组件A部分的结构</div>
      </template>
      <template v-slot:b>//可以用#b替换
        <div>填入组件B部分的结构</div>
      </template>
    </Todo>
  </div>
</template>
​
<script setup lang="ts">
import Todo from "./Todo.vue";
</script>
<style scoped>
</style>

作用域插槽

作用域插槽：可以理解为，子组件数据由父组件提供，但是子组件内部决定不了自身结构与外观(样式)

子组件Todo代码如下:

<template>
  <div>
    <h1>todo</h1>
    <ul>
     <!--组件内部遍历数组-->
      <li v-for="(item,index) in todos" :key="item.id">
         <!--作用域插槽将数据回传给父组件-->
         <slot :$row="item" :$index="index"></slot>
      </li>
    </ul>
  </div>
</template>
<script setup lang="ts">
defineProps(['todos']);//接受父组件传递过来的数据
</script>
<style scoped>
</style>

父组件内部代码如下:

<template>
  <div>
    <h1>slot</h1>
    <Todo :todos="todos">
      <template v-slot="{$row,$index}">
         <!--父组件决定子组件的结构与外观-->
         <span :style="{color:$row.done?'green':'red'}">{{$row.title}}</span>
      </template>
    </Todo>
  </div>
</template>
​
<script setup lang="ts">
import Todo from "./Todo.vue";
import { ref } from "vue";
//父组件内部数据
let todos = ref([
  { id: 1, title: "吃饭", done: true },
  { id: 2, title: "睡觉", done: false },
  { id: 3, title: "打豆豆", done: true },
]);
</script>
<style scoped>
</style>