位置: 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)

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

  • 淘宝短视频入口在哪里呢(淘宝短视频怎么操作)

    淘宝短视频入口在哪里呢(淘宝短视频怎么操作)

  • 蚂蚁森林树怎么变大(蚂蚁森林树怎么说话)

    蚂蚁森林树怎么变大(蚂蚁森林树怎么说话)

  • 打电话不能用移动网络(打电话不能用移动怎么办)

    打电话不能用移动网络(打电话不能用移动怎么办)

  • 笔记本打不出字来,怎么解决(笔记本打不出字来,怎么解决?)

    笔记本打不出字来,怎么解决(笔记本打不出字来,怎么解决?)

  • vivo手机有siri功能吗(vivo的siri在哪)

    vivo手机有siri功能吗(vivo的siri在哪)

  • 后台弹出界面是什么意思

    后台弹出界面是什么意思

  • 戴尔电脑开机重复8声嘟嘟(戴尔电脑开机重装系统按F几?)

    戴尔电脑开机重复8声嘟嘟(戴尔电脑开机重装系统按F几?)

  • iphone8快充伤电池吗(快充对苹果8p手机有影响吗)

    iphone8快充伤电池吗(快充对苹果8p手机有影响吗)

  • 美团的评价为什么不显示不出来(美团的评价为什么会被折叠呢)

    美团的评价为什么不显示不出来(美团的评价为什么会被折叠呢)

  • 苹果xr夜里耗电严重(iphonexr夜晚待机耗电)

    苹果xr夜里耗电严重(iphonexr夜晚待机耗电)

  • 苹果7p保修期多久(iphone7plus保修期)

    苹果7p保修期多久(iphone7plus保修期)

  • 举报别人qq会被对方知道吗(举报别人qq会封号吗)

    举报别人qq会被对方知道吗(举报别人qq会封号吗)

  • 什么是天猫上车(天猫汽车网上购车如何提车)

    什么是天猫上车(天猫汽车网上购车如何提车)

  • vivonex3支持面部解锁吗(vivonex3s有面部解锁吗)

    vivonex3支持面部解锁吗(vivonex3s有面部解锁吗)

  • 抖音200粉丝能开播吗(抖音200个粉丝)

    抖音200粉丝能开播吗(抖音200个粉丝)

  • 华为mate20pro指纹在哪(华为mate20pro指纹锁在哪里设置)

    华为mate20pro指纹在哪(华为mate20pro指纹锁在哪里设置)

  • 荣耀手环4怎么添加表盘(荣耀手环4怎么添加门禁卡)

    荣耀手环4怎么添加表盘(荣耀手环4怎么添加门禁卡)

  • 把别人电话拉黑了还能收到信息吗(把别人电话拉黑了对方知道吗)

    把别人电话拉黑了还能收到信息吗(把别人电话拉黑了对方知道吗)

  • 手机淘宝回收站在那里(手机淘宝回收站删除的订单还能找回吗)

    手机淘宝回收站在那里(手机淘宝回收站删除的订单还能找回吗)

  • 苹果机怎么提速(iphone手机怎么提速)

    苹果机怎么提速(iphone手机怎么提速)

  • p30pro充电充满需要多久(华为p30pro几分钟充满)

    p30pro充电充满需要多久(华为p30pro几分钟充满)

  • bios设置电脑定时自动开机/关机的设置方法图文教程(bios设置定时重启)

    bios设置电脑定时自动开机/关机的设置方法图文教程(bios设置定时重启)

  • 电脑自动更新系统好吗详情(电脑自动更新系统怎么关闭)

    电脑自动更新系统好吗详情(电脑自动更新系统怎么关闭)

  • Win11搜索栏不能输入怎么办?Win11搜索栏不能输入的解决方法(win11搜索栏不能用)

    Win11搜索栏不能输入怎么办?Win11搜索栏不能输入的解决方法(win11搜索栏不能用)

  • McWCECfg.exe是什么进程 McWCECfg进程查询(mc office是什么意思)

    McWCECfg.exe是什么进程 McWCECfg进程查询(mc office是什么意思)

  • Win7系统《战地3》打不开的解决方法(战地3 win10)

    Win7系统《战地3》打不开的解决方法(战地3 win10)

  • react @connect的作用简单理解(dva @connect)(react connect用法)

    react @connect的作用简单理解(dva @connect)(react connect用法)

  • 没有购销合同的销售额交印花税吗
  • 企业法人如何网上实名认证
  • 房屋租赁的发票备注怎么写
  • 企业注销处置固定资产需要缴纳哪样税
  • 社保和公积金是从工资里面扣吗
  • 增值税开票内容货物及应税劳务服务名称都有哪些
  • 承包费收入如何入账
  • 往法人账户转备用金
  • 小规模纳税申报时间
  • 收到进口增值税发票可以直接抵扣吗
  • 公司支付员工工伤赔偿怎么做账
  • 补交增值税怎么处理
  • 公司购入汽车应交什么税
  • 收入费用类科目结转至本年利润
  • 小规模企业所得税税率多少
  • 建筑工程的适用范围
  • 增值税普票未上传怎么办
  • 公司装修费用必须交税吗
  • 免抵退税额抵减额和不得免征和抵扣税额是一个意思吗
  • 印花税的收取
  • 固定资产折旧计提完毕怎么处理
  • 房产企业可计入开发成本的利息如何确定?
  • 企业出口产品条件和流程
  • 现金流量表季报还是年报
  • 客户扣款会计分录明细科目
  • 住房补贴计入个人所得税吗
  • 投资性房地产的后续计量从成本模式转为公允价值模式的
  • 高新技术的研发收入是多少才可以提高
  • 会计分录的正确书写格式图片
  • 异地预缴税款后当地还交吗
  • linux如何删除lv
  • pavsrv51.exe - pavsrv51是什么进程 有什么用
  • 系统win7旗舰版
  • 固定资产计算折旧时用扣除减值吗
  • php 单例模式优点及如何实现
  • nginx同一个端口设置两个网站
  • python网络爬虫技术
  • php 图片水印
  • code structure
  • php oracle 连接池
  • 采购入库单怎么生成
  • 加工费能直接抵税吗
  • 国际货运代理公司个人货物
  • 查询sqlserver数据库开发这门课程的最高分
  • 建筑施工仪器设备有哪些
  • 会计凭证销毁年限
  • 未计提坏账准备发生坏账如何处理
  • 购买软件使用权计入无形资产吗
  • 上年度多提财务费用
  • 辅助生产费用如何判断受益多少事指什么
  • 桩基检测费一定要收吗
  • 应交税费借方余额填列资产负债表
  • 承兑个人贴现如何操作
  • 维修基金只有收据没有发票吗
  • 销售自己使用过的物品免税吗
  • mysql必知必会mobi
  • sqlserver 优化配置
  • 联想y400装win8
  • 系统备份恢复系统
  • 电脑win 8系统
  • xp系统删除用户账户怎么没有删除键
  • pps是什么文件
  • 关闭windows报错
  • windows组策略a-g-dl-p
  • 怎么取消win10通知消息
  • xboxone系统更新错误
  • Win10 Mobile build 10586.338安装/上手体验视频
  • win8 电话激活
  • linux系统怎么复制文件到u盘
  • linux用户添加
  • 麒麟Linux系统怎么进入图形化界面
  • 如何删除命令
  • js多选
  • python class
  • jquery使用Cookie和JSON记录用户最近浏览历史
  • python simple
  • 国税账户密码在哪里能找到
  • 跨境电商上什么货源好
  • 广州财务顾问公司
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设