Vue3.2以上版本组件传参的8种方法

前言

最近在学习vue3.2 因为vue3.2之前的版本有着很高的学习成本，传参需要引用 defineEmits等，但是在3.2以后的版本省略了这一步，可以直接使用，所以写下这篇文章，针对学习成果进行串联，如果有不对的地方随时可以讨论

props传参

这个没什么好说的，上代码
父组件

 <!-- msg ：props传参 -->
  <!-- toParents ：emit传参 -->
  <Child :msg="text" @toParents="parentAccept"></Child>
<script setup>
import Child from "@/components/Child.vue";
// props传参
let num = 1;
const text = num === 1 ? true : false;

子组件接受父组件传递的参数，值得注意的是defineProps可以直接使用了不需要再引用

<script setup>
const name = "Child";
const props = defineProps({
msg: Boolean,
});

emit传参

emit传参是子组件向父组件传参，考虑可阅读性 我都会先放父组件代码再放子组件代码。
父组件

<div class="home">
   我是父组件

   <!-- msg ：props传参 -->
   <!-- toParents ：emit传参 -->
   <Child :msg="text" @toParents="parentAccept"></Child>
 </div>

<script setup>
// 子传夫 emit
let parentAccept = (val) => {
 console.log(val);
};
</script>

子组件

 <button @click="childClick">点老子快点</button>


 <script setup>
 let arr = [
  {
    num: 1,
    str: "2",
  },
];
// emit 传参
// 使用setup直接进行定义 ，此方法只适用于vue3.2以上版本
let emit = defineEmits(["toParents"]);
let childClick = () => {
  // 定义的emit可以进行传参，类型不做限制
  emit("toParents", arr);
};
</script>

expose

option API 是暴露组件实例中全部内容的 在<script setup>的标签中是全部封闭的，所以我们使用 expose进行暴露出来这样就可以进行访问,例子为子组件传给父组件

父组件

<template>
    <!-- ref :expose进行传参 -->
    <Child :msg="text" @toParents="parentAccept" ref="child"></Child>
    <button @click="getExpose">点老子快点</button>
    </template>

<script setup>
import { ref } from "vue";
// expose传参
const child = ref(null);
let getExpose = () => {
  console.log(child.value.childName);

  child.value.oneMethods();
};
</script>

子组件

<script setup>
// expose 传参
defineExpose({
  childName: "大猛",
  oneMethods() {
    console.log("ganggang");
  },
});
</script>

attrs

当一个父组件可能需要通过自定义事件和子组件通讯且并不是经常时，可以使用attrs。但是注意，由于父组件可能不会通过自定义事件和子组件通信，所以需要判断是否存在相应的attrs（不判断会出现undefined的错误）

父组件

    <!-- msg ：props传参 -->
    <!-- toParents ：emit传参 -->
    <!-- ref :expose进行传参 -->
    <!-- data,arr ：attrs传参 -->
    <Child
      :msg="text"
      @toParents="parentAccept"
      ref="child"
      :data="data"
      :arr="arr"
    ></Child>
<script setup>
import { ref } from "vue";
// attrs 传参
const data = ref("小瘪三"),
  arr = ref([112, 2, 3, 4, 5]);
</script>

子组件

// atrrs 进行接收
const attrs = useAttrs();
console.log(attrs);
</script>

v-model

在vue3中一个组件支持多个数据绑定

父组件

 <!-- msg ：props传参 -->
    <!-- toParents ：emit传参 -->
    <!-- ref :expose进行传参 -->
    <!-- data,arr ：attrs传参 -->
    <!-- value,key :v-model传参 -->
    <Child
      :msg="text"
      @toParents="parentAccept"
      ref="child"
      :data="data"
      :arr="arr"
      v-model:value="value"
      v-model:key="key"
    ></Child>

<script setup>
import { ref } from "vue";
// v-model传参
const key = ref(1);
const value = ref("8848");
</script>

子组件

// v-model传参
const emit = defineEmits(["key", "value"]);
let childClick = () => {
  emit("update:key", "新的key");
  emit("update:value", "新的value");
};

provide/inject

没什么好说的 ，适用于父组件向无限下级组件进行传参，嵌套多深都可以
父组件

<script setup>
import { provide } from "vue";
// provide inject 传参
provide("airpods");
</script>

子组件

<script setup>
import { inject } from "vue";
// provide inject 传参
const appleUse = inject("airpods");
</script>

vuex

store=>index.js

import {
  createStore
} from 'vuex'


export default createStore({
  state: {
    count: 1
  },
  getters: {
    getCount: state => state.count
  },
  mutations: {
    add(state) {
      state.count++
    }
  },
  actions: {},
  modules: {}
})

父组件

<script setup>
import { useStore } from "vuex";
import { provide, computed } from "vue";
// vuex
const store = useStore();
console.log(store.state.count);
const count = computed(() => store.state.count); //响应式
console.log(count);
</script>

mitt

vue3中没有eventBus 我们可以下载mitt进行使用
下载
npm i mitt -s

封装

mitt.js
import mitt from 'mitt'
const mitt = mitt()
export default mitt

使用

// 组件 A
<script setup>
import mitt from './mitt'
const handleClick = () => {
    mitt.emit('handleChange')
}
</script>

// 组件 B 
<script setup>
import mitt from './mitt'
import { onUnmounted } from 'vue'
const someMethed = () => { ... }
mitt.on('handleChange',someMethed)
onUnmounted(()=>{
    mitt.off('handleChange',someMethed)
})
</script>

后语

到这vue3的传参就结束了
喜欢的朋友可以点赞评论转发