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 模板引用

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.bilibili.com/video/BV1Ac411K7EQ/?p=14&spm_id_from=333.1007.top_right_bar_window_history.content.click&vd_source=5f1b73e3c79d2a166fe739027d431f70

本文章转载自：