vue3组件常用的通信方式(父传子、子传父、pinia)

1，父传子

父组件 

父组件的setup（）{ }中定义要传递的数据，并导出定义传递的数据

<template>
  <div>
    <!-- 子组件当作一个标签使用 传入要传到子组件的数据 -->
    <Child :data=data></Child>
  </div>
</template>

<script setup>
import { ref } from 'vue'
引入子组件
import Child from './components/child.vue'
// 定义要传入子组件的数据
const data = ref('1')

</script>

子组件

<template>
    <div>
        <!-- 父组件传递的数据 -->
        {{ data }}
    </div>
</template>

<script setup>
// 从vue结构出defineProps
import { defineProps } from 'vue'
  const props = defineProps({
    data: {
      type: String
    },
  });
  console.log(props.data);
</script>

示例

父组件

    <div class="hello">
    我是父组件
    <!-- 父组件通过:变量(这里是info)绑定值 -->
     <Child :info="parentMsg"></Child>
    </div>
  </template>
   
  <script setup>
  import Child from '../components/f_z.vue'
  import {ref} from 'vue'
  const parentMsg=ref('父组件传递值是a')
   
  </script>

子组件

<template>
    <!-- info是父组件传递过了的值 -->
      <div>我是子组件拿到了父组件的值是{{info}}</div>
    </template>
     
    <script setup>
    import { toRefs, defineProps } from 'vue'
    const props = defineProps({
      //子组件接收父组件传递过来的值
      info: String,
    })
    //使用父组件传递过来的值
    const {info} =toRefs(props)
     
    console.log(info);


    </script>

2，子传父

父组件 

<template>
    <div class="hello">
    我是父组件
    <!-- clickChild是子组件绑定的事件，click是父组件接受方式 -->
     <Child  @clickChild="clickEven"></Child>
   <p>子组件传递的值是 {{result}}</p>
   </div>
  </template>
   
  <script setup>
  import Child from '../components/zj.vue'
  import {ref} from 'vue'
  const result=ref('')
  const clickEven=(val)=>{
    console.log(val);
    result.value=val
  }
  </script>

子组件

<template>
    <button @click="clickChild">点击子组件</button>
  </template>
   
  <script setup>
  import { defineEmits ,ref, toRefs} from 'vue'

const data = ref(1)

const emit = defineEmits(['clickChild'])

const clickChild = () => {
  data.value++
    let param = data 
    emit('clickChild',param)
}

 // 使用defineEmits创建名称，接受一个数组
//   const emit = defineEmits(['clickChild'])
//   const clickChild=()=>{
//     let param={
//       content:data
//     }
//     //传递给父组件
//     emit('clickChild',param)
//   }
  </script>

3，Pinia

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。它跟 Vuex 有一定的相似度，但还是有很大的区别

1,安装

yarn add pinia
# 或者使用 npm
npm install pinia

2.引入

main.js

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()

createApp(App).use(pinia).mount('#app')

3。创建文件

在 src 文件中，创建 store 文件

store/index.js

import { defineStore } from 'pinia'

const useStore = defineStore({
    id: "car",
    state(){
        return {
            num: 100
        }
    },
    actions:{
        abc() {

        }
    }
})

export {
    useStore
}

4.使用 

先引入模块，再将引入的模块对象赋值给变量 store 

import { useStore } from '@/store/index'

const store = useStore()

console.log(store.num)