我的编程空间,编程开发者的网络收藏夹
学习永远不晚

vue3组件间怎么通信?通信方式浅析

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

vue3组件间怎么通信?通信方式浅析

在我们写 vue3 的项目中,我们都会进行组件通信,我们除了使用 pinia 公共数据源的方式除外,我们还可采用那些更简单的API方法呢?那下面我就来给大家介绍介绍几种父子组件和子父组件通信的方式。

vue3组件间怎么通信?通信方式浅析

1、父子组件通信

1.1 defineProps

父子组件通信我们第一个想到的就是props,我们在子组件显示声明所接受的props,然后我们在从父组件传入对应的 key与value, 这样我们就可以在子组件上接收到父组件传过来的属性与值。【相关推荐:vuejs视频教程、web前端开发】

具体实现如下:

// children.vue
<template>
  <ul class="list-group">
      <li class="list-group-item" v-for="item in list" :key="index">
        {{item}}
      </li>

  </ul>
</template>

<script setup>
import { defineProps } from 'vue';
const props = defineProps({
    list :{
        type: Array,
        default: () => {}
    }
})
</script>
// parent.vue
<template>
  <div class="parent-wrap">
      <input type="text" v-model="value" class="form-control" placeholder="请输入">
      <div class="input-group-append">
          <button class="btn btn-primary" @click="handleAdd">添加</button>
      </div>
  </div>
  <!-- child -->
  <childrenVue :list="list"></childrenVue>
</template>
<script setup>
import { ref } from 'vue';
import childrenVue from './children.vue';
const value = ref('')
const list = ref(['javaScript', 'Html', 'CSS'])
const handleAdd = () =>{
    list.value.push(value.value)
    value = ''
}
</script>

图片.png

如上图所示,我们既实现了在子组件上显示了父组件传过来的 list 数组,还使可以向list添加数据使子组件数据更新。

1.2 provide/inject

当我们聊完了props,我们第二个要介绍的就是 vue3 的一个组合式选项 provide 和inject。

projct用于提供可以被后代组件注入的值,而inject用于声明要通过从上层提供方匹配并注入进当前组件的属性。 其代码实现如下:

// children.vue
<template>
    <ul class="list-group">
        <li class="list-group-item" v-for="item in list" :key="item">{{item}}</li>
    </ul>
</template>
<script setup>
import { inject } from 'vue';
const list = inject('list')
</script>
// parent.vue
<template>
    <div class="parent-wrap">
        <input type="text" v-model="value" class="form-control" placeholder="请输入">
        <div class="input-group-append">
            <button class="btn btn-primary" @click="handleAdd">添加</button>
        </div>
    </div>
    <!-- child -->
    <childVue />
</template>
<script setup>
import childVue from "./child.vue";
const { ref, provide, readonly } = require("vue");
const value = ref('')
const list = ref(['javaScript', 'HTML', 'CSS'])
provide('list', readonly(list.value))
const handleAdd = () => {
list.value.push(value.value)
}
</script>

图片.png

如上图所示,我们使用 provide API向外提供了一个 key 为 list,值为list.value,同时将 list,value 设置成了只读属性,防止子组件修改父组件的数据源。然后我们 injectAPI接收了 list,实现了父子组件的通信。

2.子父组件通信

2.1 defineEmits

上面我介绍了两种父向子传值的方法,但在我们开发中,我们还会遇到子向父组件传值的情况,那我们该怎么解决呢? 第一个方法就是vue3中的 defineEmits API,代码实现如下:

// children.vue
<template>
    <div class="parent-wrap">
        <input type="text" v-model="value" class="form-control" placeholder="请输入" />
        <div class="input-group-append">
            <button class="btn btn-primary" @click="handleAdd">添加</button>
        </div>
    </div>
</template>
<script setup>
const { ref, defineEmits } = require("vue");
const value = ref('')
const emits = defineEmits(['add']) //父传子

  // 给父组件传一个函数
const handleAdd = () => {
    emits('add', value.value)
    value.value= ''
}
</script>
// parent.vue
<template>  
    <childVue @add='handleAdd'/>
    <ul class="list-group">
        <li class="list-group-item" v-for="item in list" :key="item">{{item}}</li>
    </ul>
</template>
<script setup>
import { ref } from '@vue/reactivity';
import childVue from './child.vue';
const list = ref(['javaScript', 'HTML', 'CSS'])
const handleAdd = (val) => {
    list.value.push(val)
}
</script>

图片.png

如上图所示,我们在子组件上emit一个出了一个 add事件给父组件接收,同时在父组件上调用来执行添加的逻辑,再将 inputvalue变为空,实现了父组件向子组件传参。

2.2 v-model:xxx + emit

在介绍完 defineEmits后, 我们再来介绍一种与其有异曲同工之处的v-model:xxx + emit的方法,实现如下:

// children.vue
<template>
    <div class="parent-wrap">
        <input type="text" v-model="value" class="form-control" placeholder="请输入" />
        <div class="input-group-append">
            <button class="btn btn-primary" @click="handleAdd">添加</button>
        </div>
    </div>
</template>
<script setup>
const { ref, defineProps, defineEmits } = require("vue");
const value = ref('')
const props = defineProps({
    list: {
        type: Array,
        default: () => []
    }
})
const emits = defineEmits(['list'])
  // 给父组件一点东西
const handleAdd = () => {
    // props.list.push(value.value)  //不建议直接修改props的值 把握不住数据源的流转
    const arr = props.list
    arr.push(value.value)
    emits('list', arr)
    value.value= ''
}

</script>
<template>  
    <childVue v-model:list="list" @list ='add'/>
    <ul class="list-group">
        <li class="list-group-item" v-for="item in list" :key="item">{{item}}</li>
    </ul>
</template>
<script setup>
import { ref } from '@vue/reactivity';
import childVue from './child.vue';
const list = ref(['javaScript', 'HTML', 'CSS'])
const add =(val) => {
    console.log(val);
    console.log(list);
}
</script>

图片.png

再和上面的defineEmits方法比较完以后,相信大家也看出了这两者的异曲同工在哪了。我们这里是先将父组件的list传给了子组件,再在子组件修改了父组件的数据源,同时再emit还给父组件,实现了子组件向父组件传值。

(学习视频分享:vuejs入门教程、编程基础视频)

以上就是vue3组件间怎么通信?通信方式浅析的详细内容,更多请关注编程网其它相关文章!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

vue3组件间怎么通信?通信方式浅析

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

vue3组件间怎么通信?通信方式浅析

​在我们写 vue3 的项目中,我们都会进行组件通信,我们除了使用 pinia 公共数据源的方式除外,我们还可采用那些更简单的API方法呢?那下面我就来给大家介绍介绍几种父子组件和子父组件通信的方式。
2023-05-14

Vue组件间怎么通信?六种方式浅析

Vue组件间怎么通信?下面本篇文章给大家介绍一下Vue组件通信的六种方式,希望对大家有所帮助!
2023-05-14

Vue3组件间的通信方式详解

这篇文章主要介绍了Vue3组件间的通信方式,在使用vue时,我们经常会把不同的模块拆分成不同的组件,而组件之间有的需要传递数据,所以组件间的数据通信就非常重要了
2023-05-17

React组件通信浅析

这篇文章主要介绍了React组件通信,在开发中组件通信是React中的一个重要的知识点,本文通过实例代码给大家讲解react中常用的父子、跨组件通信的方法,需要的朋友可以参考下
2022-12-26

Vue3.js组件通信,兄弟组件、父子、祖孙组件间通信

mitt​ 是一个简单而小巧的事件总线库,用于在应用程序的不同部分之间进行事件通信。它提供了一种简单的方式来发射和监听事件。与 Vuex 的 $emit​ 和 $on​ 类似,但 mitt 更为轻量。

Vue3的组件通信方式有哪些

本篇内容主要讲解“Vue3的组件通信方式有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue3的组件通信方式有哪些”吧!Props父组件传值给子组件(简称:父传子)Props 文档父组件/
2023-06-29

Vue3父子组件间传参通信的四种方式

近期学习vue3的父子组件之间的传值,发现跟vue2的并没有太大的区别,下面这篇文章主要给大家介绍了关于Vue3父子组件间传参通信的四种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-05-19

Vue组件间通信方式是什么

这篇文章将为大家详细讲解有关Vue组件间通信方式是什么,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。通信方式:1、用props通信;2、用“$emit”通信;3、用ref通信;4、用EventBus通信;
2023-06-29

总结了Vue3的七种组件通信方式,别再说不会组件通信了

本篇文章是全部采用的