位置: IT常识 - 正文

Vue 组件之间传值(vue组件之间传值几种方法)

编辑:rootadmin
Vue 组件之间传值

推荐整理分享Vue 组件之间传值(vue组件之间传值几种方法),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue组件之间传递数据,vue组件之间传递方法,vue组件之间传参数,vue组件之间传值详解,vue组件之间传值几种方法,vue 组件之间传值几种方式,vue组件之间传值详解,vue组件之间传值几种方法,内容如对您有帮助,希望把文章链接给更多的朋友!

一、Vue 组件之间传值的主要方法

Vue 3 对于组件之间传递值的基本思想与 Vue 2 相似,但是有一些语法和 API 上的改变,主要的传值方法有以下几种:

1、父组件向子组件传值,使用 props:可以通过在子组件上绑定 props,然后在父组件中通过 v-bind 绑定相应的数据来传递数据。

2、子组件向父组件传值,使用 $emit:可以通过在子组件中使用 $emit 触发自定义事件,并在父组件中使用 v-on 监听相应的事件来传递数据。

3、兄弟组件之间传值:可以通过使用一个共同的父组件,然后将需要共享的数据放在父组件的 data 中,再通过 props 将数据传递给各自的子组件。

4、跨级组件传值,使用 provide 和 inject(同样适用于父子组件传值):provide 可以在祖先组件中定义一个值或者方法,然后在子孙组件中使用 inject 来注入这个值或者方法。

5、使用全局事件总线:可以使用 Vue 的事件机制,通过在 Vue 实例上使用 $on 来监听事件,然后在其他组件中使用 $emit 触发相应的事件来传递数据。这种方式可以在任意组件之间传递数据。

6、使用 Vuex:当应用的数据状态比较复杂或者需要在多个组件之间共享时,可以使用 Vuex,它是一个专为 Vue.js 应用程序开发的状态管理模式。可以在任何组件中访问和修改 Vuex 存储的数据,通过 mutations 来修改状态,通过 actions 来触发 mutations。这种方式可以方便地在不同的组件中进行状态管理和数据共享。

7、使用 $attrs 和 $listeners,$attrs 和 $listeners 是常用的两个特殊属性,它们可以用来向组件传递属性和事件监听器。

8、使用 $refs:可以使用 Vue 提供的 $refs 属性来获取组件实例,然后通过调用组件的方法来进行数据传递。这种方式不推荐使用,因为不易维护和调试。

9、使用事件总线库:可以使用 Vue.js 的第三方库如 Event Bus、Tiny-Emmiter 等来传递数据。这些库提供了一种方便、简单的方式来在不同的组件之间进行事件传递。但是需要注意,使用第三方库可能会增加项目的复杂性和维护成本。

二、Vue 2 组件之间传值示例代码

1、父组件向子组件传值,使用 props:可以通过在子组件上绑定 props,然后在父组件中通过 v-bind 绑定相应的数据来传递数据。

父组件中的代码:

<template> <div> <child-component :prop-a="dataA"></child-component> </div></template><script>import ChildComponent from './ChildComponent.vue';export default { components: { ChildComponent, }, data() { return { dataA: 'data from parent', }; },};</script>

 子组件中的代码:

<template> <div> {{ propA }} </div></template><script>export default { props: { propA: String, },};</script>2、子组件向父组件传值,使用 $emit:可以通过在子组件中使用 $emit 触发自定义事件,并在父组件中使用 v-on 监听相应的事件来传递数据。

子组件中的代码:

<template> <div> <button @click="sendDataToParent">Send Data To Parent</button> </div></template><script>export default { data() { return { dataB: 'data from child', }; }, methods: { sendDataToParent() { this.$emit('send-data', this.dataB); }, },};</script>

 父组件中的代码:

<template> <div> <child-component @send-data="receiveDataFromChild"></child-component> </div></template><script>import ChildComponent from './ChildComponent.vue';export default { components: { ChildComponent, }, methods: { receiveDataFromChild(dataB) { console.log(dataB); }, },};</script>3、兄弟组件之间传值:可以通过使用一个共同的父组件,然后将需要共享的数据放在父组件的 data 中,再通过 props 将数据传递给各自的子组件。

父组件中的代码:

<template> <div> <child-a :prop-a="dataA"></child-a> <child-b :prop-b="dataB"></child-b> </div></template><script>import ChildA from './ChildA.vue';import ChildB from './ChildB.vue';export default { components: { ChildA, ChildB, }, data() { return { dataA: 'data from parent to child a', dataB: 'data from parent to child b', }; },};</script>

 子组件 A 中的代码:

<template> <div> {{ propA }} </div></template><script>export default { props: { propA: String, },};</script>

 子组件 B 中的代码:

<template> <div> {{ propB }} </div></template><script>export default { props: { propB: String, },};</script>4、跨级组件传值,使用 provide 和 inject(该方法也可用于父子组件传值):provide 可以在祖先组件中定义一个值或者方法,然后在子孙组件中使用 inject 来注入这个值或者方法。

祖先组件中的代码:

<template> <div> <child-a></child-a> </div></template><script>import ChildA from './ChildA.vue';export default { components: { ChildA, }, provide() { return { sharedData: 'data from ancestor', }; },};</script>

 子孙组件 A 中的代码:

<template> <div> {{ sharedData }} </div></template><script>export default { inject: ['sharedData'],};</script>5、使用全局事件总线:可以使用 Vue 的事件机制,通过在 Vue 实例上使用 $on 来监听事件,然后在其他组件中使用 $emit 触发相应的事件来传递数据。这种方式可以在任意组件之间传递数据。

在 main.js 中定义一个空的 Vue 实例作为事件总线:

import Vue from 'vue';export const bus = new Vue();

 子组件 A 中的代码:

<template> <div> <button @click="sendDataToSibling">Send Data To Sibling</button> </div></template><script>import { bus } from './main';export default { methods: { sendDataToSibling() { bus.$emit('send-data', 'data from child a'); }, },};</script>Vue 组件之间传值(vue组件之间传值几种方法)

 子组件 B 中的代码:

<template> <div> {{ dataFromSibling }} </div></template><script>import { bus } from './main';export default { data() { return { dataFromSibling: '', }; }, mounted() { bus.$on('send-data', (data) => { this.dataFromSibling = data; }); },};</script>6、使用 Vuex:当应用的数据状态比较复杂或者需要在多个组件之间共享时,可以使用 Vuex,它是一个专为 Vue.js 应用程序开发的状态管理模式。可以在任何组件中访问和修改 Vuex 存储的数据,通过 mutations 来修改状态,通过 actions 来触发 mutations。这种方式可以方便地在不同的组件中进行状态管理和数据共享。

在 store.js 中定义一个 Vuex store:

import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);const store = new Vuex.Store({ state: { dataC: 'data from Vuex', }, mutations: { updateDataC(state, payload) { state.dataC = payload; }, },});export default store;

 子组件 A 中的代码:

<template> <div> <button @click="sendDataToSibling">Send Data To Sibling</button> </div></template><script>import { mapMutations } from 'vuex';export default { methods: { ...mapMutations(['updateDataC']), sendDataToSibling() { this.updateDataC('data from child a'); }, },};</script>

 子组件 B 中的代码:

<template> <div> {{ dataC }} </div></template><script>import { mapState } from 'vuex';export default { computed: { ...mapState(['dataC']), },};</script>7、父子组件传值,使用 $attrs 和 $listeners:

$attrs 是一个包含了父组件传递给子组件的所有属性的对象,可以在子组件中通过访问 $attrs 来获取这些属性。如果不希望某些属性传递到子组件中,可以在子组件中使用 v-bind="$attrs" 并指定排除的属性名称,或者在父组件中使用 .sync 修饰符,将属性绑定到子组件的一个名为 $attrs 的属性上。

$listeners 是一个包含了父组件传递给子组件的所有事件监听器的对象,可以在子组件中通过访问 $listeners 来获取这些事件监听器。如果需要在子组件中监听某个事件,可以使用 v-on="$listeners" 将所有的事件监听器绑定到子组件上。

$attrs 和 $listeners 是常用的两个特殊属性,它们可以用来向组件传递属性和事件监听器。假设我们有一个父组件和一个子组件,子组件需要接收父组件的一些属性和事件监听器,同时还需要把这些属性和事件传递给子组件的某个子元素。

父组件中的代码:

<template> <div> <child-component :title="title" v-on:click="handleClick" /> </div></template><script>import ChildComponent from './ChildComponent.vue';export default { components: { ChildComponent }, data() { return { title: 'Hello World', }; }, methods: { handleClick() { console.log('Button Clicked'); }, },};</script>

 子组件中的代码:

<template> <div> <button @click="$emit('click')">Click me</button> <div v-bind="$attrs"> <slot /> </div> </div></template><script>export default { inheritAttrs: false, props: { title: { type: String, default: '', }, }, mounted() { console.log(this.$attrs); console.log(this.$listeners); },};</script>

在子组件中,我们使用 v-bind="$attrs" 把所有父组件传递过来的属性绑定到子元素上。同时,我们使用 $emit('click') 来触发父组件传递过来的点击事件。

在子组件 中,需要设置 inheritAttrs: false,来禁止自动将父组件传递的属性绑定到子组件的根元素上。这样,我们就可以使用 v-bind="$attrs" 把所有属性绑定到子元素上。

在 mounted 钩子中,我们可以通过 this.$attrs 和 this.$listeners 来分别访问所有属性和事件监听器。这样,我们就可以在子组件中使用这些属性和事件了。

8、使用 $refs:可以使用 Vue 提供的 $refs 属性来获取组件实例,然后通过调用组件的方法来进行数据传递。这种方式不推荐使用,因为不易维护和调试。

9、使用事件总线库:可以使用 Vue.js 的第三方库如 Event Bus、Tiny-Emmiter 等来传递数据。这些库提供了一种方便、简单的方式来在不同的组件之间进行事件传递。但是需要注意,使用第三方库可能会增加项目的复杂性和维护成本。

三、Vue 3 组件之间传值示例代码

1、Props

Props 是一种在组件之间传递数据的方式,通过在组件标签上使用属性绑定,父组件可以向子组件传递数据。在子组件中,通过在 props 中定义对应的属性名,可以获取到父组件传递过来的数据。

例如,父组件中的模板:

<template> <child-component :message="hello"></child-component></template><script>import ChildComponent from './ChildComponent.vue';export default { components: { ChildComponent }, data() { return { hello: 'Hello from parent!' }; }};</script>

 子组件中的模板:

<template> <div>{{ message }}</div></template><script>export default { props: { message: String }};</script>2、$emit 

$emit  是一种在子组件中触发事件的方式,通过在子组件中使用 $emit 方法,可以向父组件发送数据。在父组件中,通过在子组件标签上使用 v-on 或 @ 语法,可以监听子组件触发的事件,并获取子组件发送的数据。

例如,子组件中的模板:

<template> <button @click="sendMessage">Send Message</button></template><script>export default { methods: { sendMessage() { this.$emit('message-sent', 'Hello from child!'); } }};</script>

 父组件中的模板:

<template> <child-component @message-sent="receiveMessage"></child-component></template><script>import ChildComponent from './ChildComponent.vue';export default { components: { ChildComponent }, methods: { receiveMessage(message) { console.log(message); } }};</script>3、Provide/Inject

Provide/Inject 是一种在祖先组件和后代组件之间共享数据的方式。通过在祖先组件中使用 provide 方法提供数据,在后代组件中使用 inject 方法获取数据。

例如,祖先组件中的模板:

<template> <child-component></child-component></template><script>import ChildComponent from './ChildComponent.vue';export default { components: { ChildComponent }, provide() { return { message: 'Hello from ancestor!' }; }};</script>

 后代组件中的模板:

<template> <div>{{ message }}</div></template><script>export default { inject: ['message']};</script>4、$attrs 和 $listeners

$attrs 和 $listeners 是在 Vue 2 中引入的特性,但在 Vue 3 中也得到了支持。

例如,父组件中的模板:

<template> <child-component message="Hello from parent!" @click="handleClick"></child-component></template><script>import ChildComponent from './ChildComponent.vue';export default { components: { ChildComponent }, methods: { handleClick() { console.log('Clicked!'); } }};</script>

 子组件中的模板:

<template> <div v-bind="$attrs" v-on="$listeners">{{ message }}</div></template><script>export default { props: { message: String }};</script>5、provide/inject 与 props 的结合使用

在 Vue 3 中,provide 和 inject 可以与 props 结合使用,从而实现一种高级的数据传递方式。具体做法是,在祖先组件中使用 provide 方法提供数据,并在后代组件中使用 inject 方法获取数据;同时,在后代组件中,可以在 props 中

本文链接地址:https://www.jiuchutong.com/zhishi/300598.html 转载请保留说明!

上一篇:【chatgpt】chatgpt APi使用 GPT3(chattra)

下一篇:你的应用太慢了,给我司带来了巨额损失,该怎么办(应用加载慢)

  • 公众号应该做什么内容?(微信公众号做什么)

    公众号应该做什么内容?(微信公众号做什么)

  • 高速电子支付的发票在哪里开(高速电子支付的发票会发手机上吗)

    高速电子支付的发票在哪里开(高速电子支付的发票会发手机上吗)

  • 魅族17支持红外功能线的吗(魅族17pro支持红外)

    魅族17支持红外功能线的吗(魅族17pro支持红外)

  • 华为mate30可以测室内温度吗(华为mate30可以测距吗)

    华为mate30可以测室内温度吗(华为mate30可以测距吗)

  • qq账号冻结了几天才会恢复(qq账号冻结了几年怎么办)

    qq账号冻结了几天才会恢复(qq账号冻结了几年怎么办)

  • iphone11声音很小(iphone11 声音很小)

    iphone11声音很小(iphone11 声音很小)

  • 苹果x怎样设置黑名单打不进电话来(苹果x怎样设置面容解锁)

    苹果x怎样设置黑名单打不进电话来(苹果x怎样设置面容解锁)

  • 手机微信屏幕变黑色怎么办(手机微信屏幕变成黑白色怎样调回来)

    手机微信屏幕变黑色怎么办(手机微信屏幕变成黑白色怎样调回来)

  • 电脑alt+a截图没用怎么办(电脑截图ctrl+alt+a截图不了)

    电脑alt+a截图没用怎么办(电脑截图ctrl+alt+a截图不了)

  • 手机格式化后会变快吗(手机格式化后会怎样)

    手机格式化后会变快吗(手机格式化后会怎样)

  • 台式电脑连wifi需要什么东西(台式电脑连wifi还是网线哪个好)

    台式电脑连wifi需要什么东西(台式电脑连wifi还是网线哪个好)

  • 朋友圈一横一点一横什么意思(朋友圈一横一点是删除好友了吗)

    朋友圈一横一点一横什么意思(朋友圈一横一点是删除好友了吗)

  • r03是几号电池(r03size是几号电池)

    r03是几号电池(r03size是几号电池)

  • 笔记本连热点上不了网(笔记本连热点上网)

    笔记本连热点上不了网(笔记本连热点上网)

  • 后缀名dps是什么(后缀dps是什么意思)

    后缀名dps是什么(后缀dps是什么意思)

  • 什么是ie8浏览器(ie8浏览器是啥意思)

    什么是ie8浏览器(ie8浏览器是啥意思)

  • 什么计算机是内嵌在其他设备中的专用计算机(什么计算机是内存存储器)

    什么计算机是内嵌在其他设备中的专用计算机(什么计算机是内存存储器)

  • 怎么去除图片上的涂鸦(怎么去除图片上的遮盖图)

    怎么去除图片上的涂鸦(怎么去除图片上的遮盖图)

  • 抖音推荐是根据什么(抖音推荐是根据什么推送)

    抖音推荐是根据什么(抖音推荐是根据什么推送)

  • 如何拍视频给京东卖家(京东怎么拍视频给卖家)

    如何拍视频给京东卖家(京东怎么拍视频给卖家)

  • 荣耀v20虚拟键怎么设置(华为荣耀v20怎么设置虚拟按键)

    荣耀v20虚拟键怎么设置(华为荣耀v20怎么设置虚拟按键)

  • 什么是硬件描述语言,其主要作用是什么(什么是硬件描述工具)

    什么是硬件描述语言,其主要作用是什么(什么是硬件描述工具)

  • 电脑任务栏图标变成白色文件(电脑任务栏图标怎么移到左边)

    电脑任务栏图标变成白色文件(电脑任务栏图标怎么移到左边)

  • 【详讲】微信小程序分包流程步骤(微信怎么开小)

    【详讲】微信小程序分包流程步骤(微信怎么开小)

  • 基于opencv的边缘检测方法(opencv 边缘)

    基于opencv的边缘检测方法(opencv 边缘)

  • Hive官方手册翻译(Getting Started)  实践检验真理  51CTO技术博客(hive.)

    Hive官方手册翻译(Getting Started) 实践检验真理 51CTO技术博客(hive.)

  • 织梦dedecms手机站m目录下不生成index.html实现动态更新(织梦cms怎么样)

    织梦dedecms手机站m目录下不生成index.html实现动态更新(织梦cms怎么样)

  • 企业所得税是含税价还是不含税价
  • 债务重组计入哪项科目
  • 股东归还公司借款,应该记什么科目
  • 金蝶多核算项目怎么做
  • 房产报废手续
  • 所得税汇算清缴分录怎么做
  • 个人账户转公司账户需要交税吗
  • 工会经费可不可以不交
  • 收到保险公司财产理赔款怎么做账
  • 朋友借资质汇款到公司要收税吗?
  • 同一建筑工程签不同合同
  • 营改增的重点是什么
  • 国外客户要求退货
  • 个税申报状态失败
  • 开办费摊销时间税法规定
  • 子公司注销后人员怎么安置
  • 筹建期的收入要交企业所得税吗
  • 个体户如何办税
  • 小规模纳税人没有达到起征点怎么申报附加
  • 升级win10到专业版
  • 微软雅黑字体一般用在哪里
  • 如何解决连接宽带的方法
  • win10专业版下载教程
  • 怎么看腾讯游戏
  • 税控盘进项税已抵扣如何转出分录
  • 局域网游戏电脑
  • 会计科目在建工程有金额要求吗
  • php字符串赋值
  • 采购物资发生什么费用
  • 银边翠的栽培历史
  • 怀特霍尔
  • 公司一直没有收入怎么办
  • 和平之城
  • 不良资产核销的条件 追偿180天
  • 保险公司经营外汇保险业务
  • 出差补贴怎么记账
  • 企业资产损失所得税税前扣除
  • 非居民纳税人可以做汇算清缴吗
  • php 创建对象
  • 会计有哪几种
  • 元素垂直水平居中方式
  • 基训包括哪些
  • 购进免税农产品进项税额计算
  • python idle有什么用
  • 公司必须要申报工资流水吗
  • python 记录日志
  • mongodb reference
  • 有收入就要结转成本吗为什么
  • 运输服务的增值税税率到底是6还是9
  • 帐外资金
  • 开票金额和发票金额
  • 出口货物用途
  • 电影院租金一般多少为合理
  • 单位发给职工的餐费补贴我变卖了违法吗?
  • 根据银行流水如何计算成本
  • 完工产品制造成本表
  • 汽车行业的保险返点怎么算
  • 票据贴现的分录
  • 旅客运送的一般规定
  • 认证系统维护费可以全额抵扣吗
  • Microsoft SQLServer的版本区别及选择
  • mysql无法创建函数
  • 数据库中自动增长
  • sql语句数字转化为文字
  • windows桌面快捷方式怎么创建
  • windows怎么查看
  • mac os 切换
  • 电脑ip地址设置在哪里
  • 怎么查看macbook air序列号
  • centos6.5怎么进入图形界面
  • iptables -z
  • win10 20h2怎么更新
  • jQuery中的ajax async同步和异步详解
  • 读长沙师范学院收费多少钱
  • unity socket udp
  • node.js ts
  • 江苏差旅费报销管理规定2021
  • 为什么医保卡显示无效
  • 如何查询甘肃省志愿录取状态
  • 东莞办理房产证在哪里预约
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设