Vue3组件传参的几种方式——父子组件传参、子父组件传参、eventBus挂载原型

4 篇文章 1 订阅
3 篇文章 0 订阅


为什么使用组件传参?

组件传参在Vue框架使用中是重中之重,一个单页面组件往往因为体积过大而不易维护,这就需要分而治之。比如一个crud,往往把列表作为一个子组件。新增、编辑页作为一个子组件,分页作为一个子组件。所以组件传参是必不可少的一部分。

    Vue3新增了setup语法糖,编码更简便。所以使用语法糖以及TS与否,组件传参写法也有所不同。

<1>. 不使用语法糖和ts的组件传参:

1. 组件通信——父传子

父组件:

<template>
  <div>
    <hello-world :name="name" :money="money"/>
  </div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
import { ref } from "vue";
export default {
  components: {
    HelloWorld
  },
  setup() {
    const name = ref("Jevin");
    const money = ref(0);
    return {
      name,
      money
    };
  }
};
</script>

子组件:子组件接收要先在props中声明,才能在setup中使用

<template>
  <div>
    {{ name }} <br />
    {{ money }} <br />
  </div>
</template>
<script>
export default {
  props: ["name", "money"],
  setup(props, context) {
    // props接收到传过来的参数在这里使用
    // context接收到传过来的方法在这里触发
    console.log("props", props.name);
  }
};
</script>
2. 子父组件通信

和Vue2相同,父组件定义,子组件触发。不同的是,不管是方法还是属性,子组件都要声明才能使用。

父组件:

<template>
  <div>
    <hello-world  :money="money" @getMoney="getMoney" />
    已有{{money}}</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
import { ref } from "vue";
export default {
  components: {
    HelloWorld
  },
  setup() {
    const money = ref(0);
    const getMoney = (value) => {
      money.value = value;
    };
    return {
      money,
      getMoney
    };
  }
};
</script>

子组件:

<template>
  <div>
    <button @click="giveMoney">给父亲买烟钱</button>
  </div>
</template>
<script>
export default {
  // 父组件传过来的方法也要在此声明
  emits: ["getMoney"],
  setup(props, context) {
    // props接收到传过来的参数在这里使用
    // context接收到传过来的方法在这里
    const giveMoney=()=>{
      context.emit("getMoney", 1000);
    }
    return{
      giveMoney
    }
  }
};
</script>
3. 依赖注入 peovide、inject

适用于多层级的组件通信。无论层级有多深,都可以检测到数据。

父组件:

<template>
  <div>
    <about />
  </div>
</template>
<script>
import About from "./views/About";
import { provide,ref } from "vue";
export default {
  components: {
    About
  },
  setup() {
    const name =ref('Jevin')
    const sex =ref('male')
    provide("name", name);
    provide("sex", sex);
    return {};
  }
};
</script>

子组件:

<template>
  <div class="about">
    {{ name }}
    {{ sex }}
  </div>
</template>
<script>
import { inject } from 'vue';
export default {
  setup() {
    const name = inject("name");
    const sex = inject("sex");
    return {
      name,
      sex
    };
  }
};
</script>

<2>. 使用了setup语法糖的传参方式

1.父传子:

父组件:

<template>
  <div>
    <child :message="message" />
  </div>
</template>
<script setup lang="ts">
import child from "./component/child.vue";
import { reactive } from "vue";
type Message={
  name:string,
  sex:string
}
const message:Message = reactive({
  name: "Jevin",
  sex: "男",
});
</script>

子组件:使用的是TS可以这样写,和TS声明类型相近

<template>
  <div>
    {{ message.name }}
    {{ message.sex }}
  </div>
</template>
<script setup lang="ts">
type Message = {
  name: string;
  sex: string;
};
defineProps<{
  message: Message;
}>();
</script>

子组件:未使用TS这样写,和vue2相近

<script setup>
defineProps({
  message: {
    default(){
        return {}
    },
    type: Object,
  },
});
</script>
2.子父组件通信

父组件:

<template>
  <div>
    <child @onclick1="receiveMessage1" @onclick2="receiveMessage2" />
  </div>
</template>

<script setup lang="ts">
import child from "./component/child.vue";
const receiveMessage1 = (message: string) => {
  console.log(message, "父组件接收到的1");
};
const receiveMessage2 = (message: string) => {
  console.log(message, "父组件接收到的2");
};
</script>

子组件:使用defineEmits来获取父组件传递过来的方法。【数组类型,可以同时获取多个】

<template>
  <div>
    <button @click="send1">发送消息给父组件1</button>
    <button @click="send2">发送消息给父组件2</button>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
const message = reactive("aaaaa");
const emit=defineEmits(["onclick1",'onclick2'])
const send1 = () => {
    emit("onclick1", message);
};
const send2 = () => {
    emit("onclick2", message);
};
</script>

3.子组件也可以通过ref将信息暴露给父组件

父组件:

<template>
  <div>
    <child ref="childRef" />
    {{childRef}}
  </div>
</template>
<script setup lang="ts">
import child from "./component/child.vue";
import { ref } from "vue";
const childRef = ref(0);
</script>

子组件:defineExpose限制了父组件通过ref能获取到什么。

<script setup lang="ts">
import { reactive } from "vue";
const message = reactive("aaaaa");
defineExpose({message})
</script>
3. 祖孙组件通信 provide、inject

适用于多层级嵌套,A组件provide提供数据,子组件,子组件的子组件…都可以接收数据
祖组件 provide(‘名称’,数据) 提供数据

<template>
  <div>
    <child  />
  </div>
</template>
<script setup lang="ts">
import child from "./component/child.vue";
import { provide, ref } from "vue";
const message = ref(5454343);
provide('message',message)
</script>

子组件

<template>
    <div>{{message}}</div>
</template>
<script setup lang="ts">
    import { inject,ref } from "vue";
    const message=inject('message','')
    // const message=inject('message',ref('')) 
    //如果提供的值不具有响应式,这里可以加响应式功能
    console.log(message.value) //545434
</script>
4.兄弟组件传参

vue2我们都会使用eventBus,但是Vue3不支持eventBus o n 、 on、 onoff 和 $once 实例方法被删除。

所以有的大神选择手写一个evntBus。原理其实是运用了JS设计模式之发布订阅模式。这里不多赘述,推荐一个插件来代替手撸eventBus。

安装:

npm i mitt

使用方法和eventBus类似,在main.ts挂载在原型上或者单独引用使用

单独引用:定义一个bus.js

import  mitt  from 'mitt';
const  bus=mitt();
export default bus;

父组件定义A、B两个兄弟组件

<template>
  <div>
    <A />
    <B />
  </div>
</template>
<script setup lang="ts">
import A from "./component/A.vue";
import B from "./component/B.vue";
</script>

A组件:

<template>
  <div>
    <button @click="send">兄弟组件传参</button>
  </div>
</template>
<script setup lang="ts">
import bus from "../../utils/bus";
import { ref } from "vue";
const message = ref("aaaaaaaaaaa");
const send = () => {
  bus.emit("Amessage", message);
};
</script>

B组件:

<template>
  <div>BBBB</div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import bus from "../../utils/bus";
onMounted(() => {
  bus.on("Amessage", (message) => {
    console.log(message);
  });
});
</script>

全局挂载使用:

因为在2.X版本中创建一个vue 实例是通过 new Vue()来实现的,到了3.X中则是通过使用createApp这个 API返回一个应用实例,并且可以通过链条的方式继续调用其他的方法

import mitt from 'mitt'
const app = createApp(App)
app.config.globalProperties.$bus=mitt()

父组件:引用了A、B两个兄弟组件

<template>
  <div>
    <A />
    <B />
  </div>
</template>
<script setup lang="ts">
import A from "./component/A.vue";
import B from "./component/B.vue";
</script>

A组件:通过 appContext.config.globalProperties获取上下文的全局配置。

<template>
  <div>
    <button @click="send">兄弟组件传参</button>
  </div>
</template>
<script setup lang="ts">
import { getCurrentInstance, ref, type ComponentInternalInstance } from "vue";
const { appContext } = getCurrentInstance() as ComponentInternalInstance;
const message = ref("aaaaaaaaaaa");
const send = () => {
  appContext.config.globalProperties.$bus.emit("Amessage", message);
};
</script>

B组件:

<template>
  <div>BBBB</div>
</template>
<script setup lang="ts">
import {
  getCurrentInstance,
  onMounted,
  type ComponentInternalInstance,
} from "vue";
const { appContext } = getCurrentInstance() as ComponentInternalInstance;
onMounted(() => {
  appContext.config.globalProperties.$bus.on("Amessage", (message: string) => {
    console.log(message);
  });
});
</script>

  • 2
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue3中,使用`setup`语法糖可以定义组件的逻辑和传参。引用中的父页面示例展示了如何传递参数给子组件。通过在父页面的`setup`中定义参数,然后在子组件中使用`defineProps`接收参数并使用。父组件可以通过使用`v-bind`或简写形式`:`来将参数传递给子组件。 另外,引用中的子组件示例展示了如何定义接收父组件传递的参数。在子组件的`setup`中使用`defineProps`定义参数,并指定参数的类型、默认值和是否必须传递。子组件可以通过访问`props`对象来获取父组件传递的参数值。 对于子传父的情况,可以使用`defineEmits`来定义一个触发事件的函数。引用中的子组件示例展示了如何定义一个参数,并使用`emits`函数来触发事件,将参数传递给父组件。父组件可以通过监听子组件的事件来获取子组件传递的参数值。 综上所述,使用`setup`语法糖可以方便地定义组件的逻辑和传参,同时可以实现子组件传递参数给父组件的功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vue3父子组件传参(setup语法糖写法)](https://blog.csdn.net/skyblue_afan/article/details/126667586)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

liuwenjie_

感谢打赏,问题留言~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值