Vue3组件通讯方式

1.父子传参

个人概括：

《   其实vue3 的很多方法都跟vue2相似也几乎可以说是一样只不过调用方式不同，父子传参，之前父传子 子接受用的是props现在呢换成了defineProps，跟props用法差不多里面一个数据和它的类型然后就调用就可以了 》

import Zi from './views/Index.vue'       //子组件
import { ref } from "vue"

const fatherMessage = ref<string>("我是父组件传过来的值")

const sonMessage = ref<string>("")
父组件：↓

子组件：↓

interface Props {
    fatherMessage?: string,
}

//defineProps是一个函数，参数与vue2的props选项相同
defineProps<Props>()

效果图：

2.子父传参

父组件：↓

import Zi from './views/Index.vue'   //子组件
import { ref } from "vue"

const sonMessage = ref<string>("")
const getSonValue = (value: string) => {
  sonMessage.value = value
}

子组件：↓

import { ref} from "vue"

// 定义所要传给父组件的值
const value = ref<String>("我是子组件传给父组件的值")

// 使用defineEmits注册一个自定义事件
const emit = defineEmits(["getValue1"])

const btn = () => {
    emit('getValue1', value.value)
}
 

效果图：↓

3.Pinia

个人概括

《 其实pinia可以说是vuex的升级版用法跟函数的意思都差不多pinia更灵活了一点，相比vuex Pinia没有mutations函数，其余三个一模一样的，意思也一样，state是数据 getters是计算方法、actions是同步异步方法，个人感觉只要vue没问题，pinia看着就是通俗易懂的东西。

》

1. pinia没有mutations，只有：state、getters、actions。
2. pinia分模块不需要modules（之前vuex分模块需要modules）。
3. pinia体积更小（性能更好）。
4. pinia可以直接修改state数

1.main.js/ts引入

import { createPinia } from 'pinia'

app.use(createPinia())

2.在index.js/ts中写入

state就是你的数据

getters计算方法

actions就是同步异步方法，只要vue2学的还行，这些一看就能明白，包括上边的父子传参

import { defineStore } from 'pinia'

export const useStore = defineStore('storeId', {
  state: () => {
    return {
      num: 0,
    }
  },
  getters:{},
  actions:{}
})

3. 在组件中使用，其实跟vuex大概类似

<script setup>
import { useStore } from '../store'
const store = useStore();
</script>