vue3 父子组件间通信

day1-11 父子组件间通信（父传子）

父组件：

<script setup>

import SonCom from './components/son-com.vue'
import {ref} from "vue";
const totall = ref(100)

setTimeout(()=>{
  totall.value = 300
},3000)
</script>

<template>

  <div>
<!-- 父组件传入一个属性值  传递静态数据和动态数据 -->
    <SonCom  message="父组件得值张三丰"  :totall="totall"/>
  </div>

</template>

<style scoped>
</style>

子组件：

<script setup>
const  props = defineProps({
  message: String,
  totall: Number,
})

console.log('在这里使用props', props)
</script>

<template>

  <div class="son">
    <h3>子组件</h3>
    <h3>父组件得值： {{message}}</h3>
    <h3>父组件得totall： {{totall}}</h3>
  </div>

</template>

<style scoped>
</style>

day1-12 父子组件间通信（子传父）

总结：

父传子
1.父传子的过程中通过什么方式接收
props?defineProps({ 属性名: 类型})
2.setup语法糖中如何使用父组件传过来的数据?
const props = defineProps({属性名: 类型})

const  props = defineProps({
  message: String,
  totall: Number,
})

子传父
1.子传父的过程中通过什么方式得到emit方法?
defineEmits(事件名称])

const emit = defineEmits(['函数名'])
emit('函数名字', '需要传递得参数')

day1-13 模板引用

defineExpose()
默认情况下在<script setup>语法糖下组件内部的属性和方法是不开放给父组件访问的，可以通过defineExpose编译宏指定哪些属性和方法允许访问

day1-14 跨组件通信：

跨组件传值： 传递普通变量

跨组件传值： 传递响应式数据

跨组件传值： 子组件调用父组件的函数：传递方法（谁的数据 谁负责修改）

1.provide和inject的作用是什么?

在vue3中 可以使用provide和inject进行跨组件通信，那么是否可以用来替代父子组件间的通信模式？如果不能，是什么原因，如果可以，又是因为什么？
综合案例：

git clone http://git.itcast.cn/heimaqianduan/vue3-basic-project.git

day2-02 使用Pinia（同步和异步都支持）：


定义异步的方法：

storeToRefs的作用，保持数据的响应式结构


1.Pinia是用来做什么的?

集中状态管理工具，新一代的vuex

2.Pinia中还需要mutation吗?

不需要，action既支持同步也支持异步

Pinia如何实现getter?

computed计算属性函数

4.Pinia产生的Store如何解构赋值数据保持响应式?

storeToRefs

文档地址：
https://www.yuque.com/fechaichai/td99ck/slubxnbeeigegsp5
​www.yuque.com/fechaichai/td99ck/slubxnbeeigegsp5

视频地址：
https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/BV1Ac411K7EQ/%3Fp%3D14%26spm_id_from%3D333.1007.top_right_bar_window_history.content.click%26vd_source%3D5f1b73e3c79d2a166fe739027d431f70

https://www.bilibili.com/video/BV1Ac411K7EQ/?p=14&spm_id_from=333.1007.top_right_bar_window_history.content.click&vd_source=5f1b73e3c79d2a166fe739027d431f70

本文章转载自：https://zhuanlan.zhihu.com/p/640842545