vue组件间传值的方法你知道几种
作者:最好的我们, 发布时间:2024-04-28 09:31:32
一丶父子组件传值
先在父组件中给子组件的自定义属性绑定一个 父组件的变量
<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;
},
}
来源:https://blog.csdn.net/qq_45466204/article/details/122867453
猜你喜欢
- Python3异步asyncio问题官方文档:https://docs.python.org/zh-cn/3/library/asyncio
- 本文实例讲述了Python wxPython库消息对话框MessageDialog用法。分享给大家供大家参考,具体如下:消息对话框即我们平时
- 大部分数据库管理员拥有某种形式的数据库元数据库,他们依赖其来跟踪范围很广的Microsoft SQL Server环境。我利用连接的服务器和
- 最佳方式:根据map的长度,新建一个数组,遍历map逐个压入方法1(效率很高):func getKeys1(m map[int]int) [
- 本文实例讲述了Python基于tkinter模块实现的改名小工具。分享给大家供大家参考,具体如下:#!/usr/bin/env python
- 之前用Class类来搭建神经网络class Neuro_net(torch.nn.Module): ""&q
- 0.环境需要1.准备Linux环境(系统:CentOS7)2.准备MySQL安装包(版本:8.0.20)3.安装方式为:msyql解压安装1
- python读取npy文件时,太大不能完全显示,其解决方法当用python读取npy文件时,会遇到npy文件太大,用print函数打印时不能
- demo中的p中的script改大或改小看看。。。移动到top的时间始终是一定的,你也可以设置一个阀值,在页面高度到达这个阀值之前,移动的总
- 本文不讲归一化原理,只介绍实现(事实上看了代码就会懂原理),代码如下:def Normalize(data): m = np.mean(da
- 通常我们在制作上图的时候,会分别给四个div加上不同的css属性,来实现中间间隔。但我们更希望的是不需要对html标签做标识,直接能通过cs
- 索引并不是时时都会生效的,比如以下几种情况,将导致索引失效:如果条件中有or,即使其中有条件带索引也不会使用(这也是为什么尽量少用or的原因
- 最近在做webIM,嵌入到OA系统,由于WEBIM处在独立页面,所以如果多次点击就会出现多个页面,这样在IE6下,服务器推送会认不到页面.所
- 继续Mootools的扩展,适用于Mootools 1.1及1.2,这次在Element扩展了两个非常简单的方法,一个用来获取
- 先说迭代器,对于string、list、dict、tuple等这类容器对象,使用for循环遍历是很方便的。在后台for语句对容器对象调用it
- profiling是个很好用的mysql性能分析工具,今儿就来试验下profiling的功能。感谢 有爱玫瑰的博文:mysql 的 sql
- 这篇文章收集了我在Python新手开发者写的代码中所见到的不规范但偶尔又很微妙的问题。本文的目的是为了帮助那些新手开发者渡过写出丑陋的Pyt
- 本文对djangoHTML的表单控件中的单选及多选进行介绍,并说明如何进行参数传递。1.HTML中的表单控件:在HTML中表单的书写一般为:
- 现在主流的cms或者blog等系统中,都内置的有插件系统,但是层层深入、剖析实现的方式,其实都是最简单的钩子的复杂化的实现。前言钩子是插件执
- 本文实例讲述了Python基础之条件控制操作。分享给大家供大家参考,具体如下:if 语句Python中if语句的一般形式如下所示:if co