返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue组件间传值的方法你知道几种
  • 427
分享到

vue组件间传值的方法你知道几种

2024-04-02 19:04:59 427人浏览 独家记忆
摘要

目录一丶父子组件传值二丶子父组件传值三丶兄弟组件传值四丶$parent /$children与ref总结一丶父子组件传值 先在父组件中给子组件的自定义属性绑定一个 父组件的变量 &l

一丶父子组件传值

先在父组件中给子组件的自定义属性绑定一个 父组件的变量

<template class="father">
   <child :自定义属性名="父组件的变量"></child> 
<template >

在子组件的props属性中可以取出父组件给的值,props中的变量用法和data中变量用法完全一样,只不过值的来源不同

export default {
	name: "child",
	props: ["自定义属性名"],
    data() {}
}

二丶子父组件传值

先在父组件中给子组件的 自定义属性 绑定一个父组件的函数

<template class="father">  
	<child  @自定义事件="父的处理函数">
<template >
export default {
	name: "father",
	data() {}
	methods:{
		父的处理函数(参数){
            //参数:得到子组件触发事件($emit)时,传递过来的数据
        }
    }
})

在子组件中 this.$emit(“父的处理函数”,this.数据) 触发父组件中的函数进行传参

三丶兄弟组件传值

事件总线:

就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件

创建全局空Vue实例:eventBus

import Vue from 'vue';
const eventBus= new Vue()  //创建事件总线
export default eventBus;

具体页面使用$emit发布事件 - 传递值

import eventBus from '@u/eventBus'
eventBus.$emit('send',‘hello')

具体页面使用$on订阅事件 - 接收组件值

import eventBus from '@u/eventBus'
eventBus.$on('send', msg => {
	console.log(msg)  //控制台输出 hello
}

注意:$on先进行监听,一旦$emit发布事件后所有组件都可以$on监听到事件。所以传递参数的时候一定已经先进行了监听才能得到参数。比如在父组件中$emit事件放在mounted钩子函数中,等待子组件创建并$on开始监听事件后再去触发$emit发布事件。

$off()移除事件监听

import eventBus from '@u/eventBus'
eventBus.$off('send')  

事件订阅功能$on是$eventBus对象完成的,与组件无关,如果用v-if销毁子组件的时候,会形成闭包,造成内存泄露,所有要在销毁组件的时候进行取消监听事件

具体形成原因点击查看

四丶$parent /$children与ref

$parent方法是在子组件中可以直接访问该组件的父实例或组件。

在父组件中定义一个切换显示页面执行中的显示方法。

switchLoadPage(msg) {
    if(!this.loading && msg)
  		this.loadtext=msg;
  		this.loading = !this.loading;
},

​ 在子组件中直接通过$parent去调用该方法

this.$parent.switchLoadPage();

$children方法是在父组件中可以直接访问子组件的实例,但是不保证子组件的顺序。

ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例。

在父组件中自定义一个表格组件,给子组件加上 ref属性

<result ref="result" :config="dGConfig"  ></result>

在父组件中就可以通过this.$refs.result去找到result子组件进行操作,比如把父组件的sdata直接放入子组件中

methods: {
  	info(){
   		this.$refs.result.sdata = this.sdata;
    },
}

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注编程网的更多内容!        

--结束END--

本文标题: vue组件间传值的方法你知道几种

本文链接: https://lsjlt.com/news/138829.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue组件间传值的方法你知道几种
    目录一丶父子组件传值二丶子父组件传值三丶兄弟组件传值四丶$parent /$children与ref总结一丶父子组件传值 先在父组件中给子组件的自定义属性绑定一个 父组件的变量 &l...
    99+
    2024-04-02
  • vue中组件之间相互通信传值的几种方法详解
    目录vue中组件之间相互通讯传值的方式1、子组件和父组件通讯,通过调用父组件给组件自定义属性值来实现2、父组件主动获取子组件数据3、使用provide/inject方法实现4、使用事...
    99+
    2024-04-02
  • 分享Vue组件传值的几种常用方式(一)
    目录前言第一种:父向子传值新建文件导入结构引入 注册 使用子组件子组件内部代码完善父组件内部代码完善操作main.js文件思路总结前言 大家好,这个系列我们来讲解一下vue组件传值的...
    99+
    2024-04-02
  • 分享Vue组件传值的几种常用方式(二)
    目录前言子向父传值一 文件配置及模板生成二 Son组件内部处理三 Father组件内部处理总结代码前言 大家好,在上一篇文章分享Vue组件传值的几种常用方式(一)中我们介绍了父组件向...
    99+
    2024-04-02
  • Vue父子组件传值的三种方法
    目录前言一、Vue父子传值的方法二、方法详解1.props / $emit2.$parent / children3.$ref总结提示:文章写完后,目录可以自动生成,如何生成可参考右...
    99+
    2022-12-20
    Vue父子组件传值 Vue父子组件
  • 异步编程的几种方式,你知道几种?
    异步执行对于开发者来说并不陌生,在实际的开发过程中,很多场景多会使用到异步,相比同步执行,异步可以大大缩短请求链路耗时时间。比如:「发送短信、邮件、异步更新等」,这些都是典型的可以通过异步实现的场景。异步的8种实现方式 1、线程Thread...
    99+
    2023-08-15
  • vue组件之间进行传值的方法
    目录前言1.父组件向子组件进行传值2.子组件向父组件进行传值3.非父子组件之间的传值 总结前言 目前在做vue的项目,用到了子组件依赖其父组件的数据,进行子组件的相关请求和...
    99+
    2024-04-02
  • Vue组件之间的通信你知道多少
    目录Vue组件间通信1.父向子传递数据1.props的大小写2.props的两种写法3.传递动态props2.子向父传递数据3.兄弟(任意)组件间的传值3.1全局事件总线3.2消息订...
    99+
    2024-04-02
  • vue父子组件之间的传参的几种方式小结
    目录Propsemitprovide/injectparent/$children属性Props 这是最常用的一种方式。通过props选项,在父组件中传递数据给子组件。在子组件中使用...
    99+
    2023-05-18
    vue 父子组件传参 vue父子传参
  • Vue中父组件向子组件传递数据的几种方法
    最近在学习vue的源码,总结了几种vue中父子组件传递数据的方法。 1.props & event 父组件向子组件传递props数据,子组件通过触发事件向父组件回传数据,代...
    99+
    2024-04-02
  • vue2.0中组件传值的几种方式总结
    目录搭建好测试环境1.方法一父传子子传父2.方法二父传子子传父奇怪的传值3.方法三4.兄弟组件之间传值总结搭建好测试环境 app.vue <template> &l...
    99+
    2022-12-08
    vue2.0组件传值 vue组件传值 vue2.0组件传值方式
  • react组件传值的四种方法
    目录1、父向子传值2、子向父传值3、非父子传值4、Context 方法 传值 【类似vue的 provide / inject】1、父向子传值 父组件 classAppextends...
    99+
    2023-05-18
    react组件传值 react 传值
  • vue组件传值的11种方式总结
    目录1、父组件传给子组件2、子组件传给父组件3、兄弟组件间传值4、路由间传值 i.使用问号传值5、使用$ref传值6、使用依赖注入传给后代子孙曾孙7、祖传孙 $attrs8、孙传祖9...
    99+
    2023-01-13
    vue组件传值 vue组件 组件传值
  • MySQL中复制表的方式你知道几种
    mysql 想必大家比较熟悉了, 我们常见的crud  sql 想必大家也是手到拈来。 但是我在今儿上数据库课的时候,我好像连mysql中复制表的基础写法 都不会。 可能工作中不常用,但作为基础 还是想写出来分享给大家。 这里 我介绍四种常...
    99+
    2023-09-05
    mysql 数据库 sql
  • Python 中快的循环方式,你知道几种?
    大家好,我是 somenzz,今天我们来研究一下 Python 中最快的循环方式。各种姿势比如说有一个简单的任务,就是从 1 累加到 1 亿,我们至少可以有 7 种方法来实现,列举如下:1、while 循环def while_loop(n=...
    99+
    2023-05-14
    Python 生成器 循环方式
  • Vue组件间通信有哪几种方式
    这篇文章将为大家详细讲解有关Vue组件间通信有哪几种方式,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Vue 组件间通信有哪几种方式?Vue 组件间通信是面试常考的知识点...
    99+
    2024-04-02
  • vue组件传值的方式
    vue组件传值的方式:1、父传子;2、子传父;3、兄弟传值;4、问号传值,冒号传值和父子组件传值;5、使用“$ref”传值;6、使用“inject”给当前实例注入父组件的数据;7、祖传孙;8、孙传祖;9、$parent;10、session...
    99+
    2023-07-18
  • 带你了解Angular组件间进行通信的几种方法
    本文纯文字,比较枯燥。因为控制台打印的东西比较鸡肋,所以就不配图了,嗯~希望读者跟着说明代码走一遍更容易吸收~1. 父组件通过属性传递值给子组件相当于你自定义了一个属性,通过组件的引入,将值传递给子组件。Show you the CODE。...
    99+
    2023-05-14
    Angular 组件通信
  • PHP 生成随机数的 5 种方式,你知道几种
    我知道五种PHP生成随机数的方式:1. 使用rand()函数:rand()函数可以生成一个指定范围内的随机整数。例如,生成1到10之...
    99+
    2023-09-21
    PHP
  • vue组件传值有什么方法
    这篇文章主要为大家展示了“vue组件传值有什么方法”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue组件传值有什么方法”这篇文章吧。vue组件传值的五种方法:1、父组件向子组件进行传值;2、子...
    99+
    2023-06-25
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作