Vue组件之间的参数传递与方法调用的实例详解
目录
- 父组件向子组件
- 子组件调用父组件方法
- 其它组件间调用
- 补充：
父组件向子组件
1.父组件向子组件传参：父组件中的子组件标签中增加 :param="param"
子组件中增加 props 接受参数（注意props需要与data同级）
props: {
param: {
type: Object
}
},
data() {
return {
...
}
},
2.父组件调用子组件方法：父组件中子组件的标签增加 ref="abc"
例如：
<child ref="abc"></child>
然后在父组件中使用 refs直接调用子组件方法
例如：
this.$refs.abc.XXX()
子组件调用父组件方法
1.父组件中子组件的标签注册方法 @abc="XXX"
子组件中使用$emit 调用父组件方法
例如：
// 无参
this.$emit('abc')
// 带参
this.$emit('abc', {params})
2.子组件使用$parent
例如：
// 方法
this.$parent.abc()
// 属性
this.$parent.abcd = 1
其它组件间调用
可以使用EventBus
在被调用的组件中使用EventBus.$on，在调用的组件中使用EventBus.$emit
例如：
被调用的组件中：
created() {
EventBus.$off('Name')
EventBus.$on('Name', (data1, data2) => {
this.method(data1,data2)
})
}
调用的组件中：
EventBus.$emit('Name', res.data.list, flag)
补充：
props的几种写法：
// 默认写法
props: {
btnClick: {
type: Function,
default: function() {}
},
titleName: {
type: String,
default: "内容"
},
display: {
type: String,
default: "table"
},
columnNum: {
type: Number,
default: 1
},
columnslist: {
type: Array,
default() {
return [];
}
},
showPage: {
type: Boolean,
default: true
},
apiData: {
type: Object,
default() {
return {};
}
},
param: {
type: Object,
default() {
return {};
}
},
defaultParam: {
type: Boolean,
default() {
return true;
}
}
},
注意：如果默认值的类型为数组或者对象的话，一定要在函数中返回这个默认值，而不是直接写，否则会报错
// 正确：
datalist:{
type:Array,
default:function(){
return []
}
}
// 错误
datalist:{
type:Array,
default:[]
}
// 或者直接跟上面第一个代码一样，不管什么类型，都写在函数返回中。
补充2：VUE 父组件动态传值给子组件
https://www.jb51.net/article/127980.htm
到此这篇关于Vue组件之间的参数传递与方法调用的实例详解的文章就介绍到这了,更多相关vue参数传递内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
vue中实现methods一个方法调用另外一个方法
vue在同一个组件内: methods中的一个方法调用methods中的另外一个方法 可以在调用的时候 this.$options.methods.test2(); this.$options.methods.test2();一个方法调用另外一个方法: new Vue({ el: '#app', data: { test:111, }, methods: { test1:function(){ alert(this.test) }, test2:function(){ alert("this
-
Vue中v-on的基础用法、参数传递和修饰符的示例详解
一.v-on的基本用法 使用v-on:click给button绑定监听事件以及回调函数,@是v-on:的缩写,也就是简写也可以使用@click.方法一般是需要写方法名加上(),在@click中可以省掉,如上述的<button @click="increment">加</button>. 以简单的计数器为例 <body> <div id="app"> <h2>{{count}}</h2> <
-
vue组件间的参数传递实例详解
场景分析 在前端开发中,我们常常会运用到"组件库".在main入口中引入组件库,就可以很轻松的在页面中引入,并做一些基本的配置,如样式,颜色等.只需要在引入的组件中写入特定的属性,就能够定义. 举例说明 例如:element-ui组件库中使用switch开关,有个属性active-color是设置"打开时"的背景色.change事件是触发状态的事件. <el-switch v-model="value" :active-color=&quo
-
关于Vue3父子组件emit参数传递问题(解决Vue2this.$emit无效问题)
目录 1.解决this.$emit无效问题 2.Vuex问题 3.总结 之前写了一篇Vue3路由跳转问题的博客,发现还是有很多同学对基本的使用改变还没有了解,于是我就顺道把常用的组件间传递的方式也写一下吧....... 注意的是: 1.Vue3中不在强调this的使用,可以说你在setup中完全不能用this,不像Vue2中把全部的内容都集成到this中. 2.Vue3现在由于compositionAPI的方式可以说是弱化了Vuex的存在(当然Vuex现在可以用没什么变化). 3.如果您有Vue
-
vue中路由参数传递可能会遇到的坑
前言 vue中路由跳转传参数有多种,自己常用的是下面的几种 通过router-link进行跳转 通过编程导航进行路由跳转 本文主要给大家介绍了关于vue路由参数传递遇到的一些坑,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 首先我的路由的定义 { path: '/b', name: 'B', component: resolve => require(['../pages/B.vue'], resolve) } 我从A组件跳转到B组件,并通过路由信息对象传递一些参数 this
-
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Vue作为最近最炙手可热的前端框架,其简单的入门方式和功能强大的API是其优点.而同时因为其API的多样性和丰富性,所以他的很多开发方式就和一切基于组件的React不同,如果没有对Vue的API(有一些甚至文档都没提到)有一个全面的了解,那么在开发和设计一个组件的时候有可能就会绕一个大圈子,所以我非常推荐各位在学习Vue的时候先要对Vue核心的所有API都有一个了解. 举个例子,通知组件notification基本是现代web开发标配,在很多地方都能用到.而在以Vue作为核心框架的前端项目中,因
-
Vue组件之间的参数传递与方法调用的实例详解
目录 父组件向子组件 子组件调用父组件方法 其它组件间调用 补充: 父组件向子组件 1.父组件向子组件传参:父组件中的子组件标签中增加 :param="param" 子组件中增加 props 接受参数(注意props需要与data同级) props: { param: { type: Object } }, data() { return { ... } }, 2.父组件调用子组件方法:父组件中子组件的标签增加 ref="abc" 例如: <child ref
-
Vue父组件和子组件之间数据传递和方法调用
vue组件在通信中,无论是子组件向父组件传值还是父组件向子组件传值,他们都有一个共同点就是有中间介质,子向父的介质是自定义事件,父向子的介质是props中的属性. 父组件向子组件传值(子组件主动获取父组件的数据和方法) 父组件import引用子组件 使用子组件时在子组件上添加一个v-bind属性,并绑定上数据 在子组件中创建 props ,在props 中创建相同的属性名,用来接收数据 把接收到的数据在子组件中使用 子组件向父组件传值(父组件主动获取子组件的数据和方法) 子组件中需要发出该自定义
-
vue组件之间数据传递的方法实例分析
本文实例分析了vue组件之间数据传递的方法.分享给大家供大家参考,具体如下: 1.props:父组件 -->传值到子组件 app.vue是父组件 ,其它组件是子组件,把父组件值传递给子组件需要使用 =>props 在父组件(App.vue)定义一个属性(变量)sexVal = '男' 把该值传递给 子组件(B.vue),如下: App.vue <template> <div id="app"> <!--<router-view>&
-
vue组件之间的数据传递方法详解
(1)props属性: 在父组件中,可以通过子组件标签属性的形式将数据或者函数传给子组件,子组件通过props去读取父组件传过来的数据 用法 父组件传数据给子组件: 一般的属性值都是用来给子组件展示的 子组件传数据给父组件 属性值为函数类型的,一般是用来子组件向父组件传递数据,子组件通过调用父组件传过来的函数,可以修改父组件的状态数据 缺点: 隔层组件间传递: 必须逐层传递(麻烦) 兄弟组件间: 必须借助父组件(麻烦) 注意: //子组件获取父组件传过来的值 props: { obj: {//o
-
vue组件之间进行传值的方法
目录 前言 1.父组件向子组件进行传值 2.子组件向父组件进行传值 3.非父子组件之间的传值 总结 前言 目前在做vue的项目,用到了子组件依赖其父组件的数据,进行子组件的相关请求和页面数据展示,父组件渲染需要子组件通知更新父组件的state,父子组件之间的传值一般有三种方法: 父传子子传父非父子传值 注意: 父子组件的关系可以总结为 prop 向下传递,事件向上传递.父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息. 接下来,我们会通过实例代码来看的更清晰,理解更容易:
-
goalng 结构体 方法集 接口实例详解
目录 一 前序 二 事出有因 errors.As 方法签名 三 结构体与实例的数据结构 1. 结构体类型 2. 实例 3 方法调用 3.1 方法表达式 3.2 值实例调用所有方法 3.3 指针实例调用所有方法 3.4 空指针无法调用值方法 四 接口 1 接口数据结构 2 接口赋值 值方法集 指针方法集 总结 一 前序 很多时候我们以为自己懂了,但内心深处却偶有困惑,知识是严谨的,偶有困惑就是不懂,很幸运通过大量代码的磨练,终于看清困惑,并弄懂了. 本篇包括结构体,类型, 及 接口相关知识,希望对
-
Python 调用Java实例详解
Python 调用Java实例详解 前言: Python 对服务器端编程不如Java 所以这方面可能要调用Java代码 前提: Linux 环境 1 安装 jpype1 安装后测试代码: from jpype import * startJVM(getDefaultJVMPath(), "-ea") java.lang.System.out.println("Hello World") shutdownJVM() 2 调用非jdk的jar包, test.jar 包
-
Java使用agent实现main方法之前的实例详解
Java使用agent实现main方法之前的实例详解 创建Agent项目 PreMainExecutor 类,在main方法之前执行此方法 public class PreMainExecutor { public static void premain(String agentOps, Instrumentation inst){ System.out.println("premain execute.........."); } } META-INF/MANIFEST.MF Man
-
vue watch普通监听和深度监听实例详解(数组和对象)
下面通过一段代码给大家介绍vue watch的普通监听和深度监听,具体代码如下所示: var vm=new Vue({ data:{ num:1, obj:{ name:'三儿', age:'21', sex:'女' } }, watch:{ num(val, oldVal){ //普通的watch监听 console.log("num: "+val, oldVal); }, obj:{ //深度监听,可监听到对象.数组的变化 handler(val, oldVal){ console
-
java中构造器内部调用构造器实例详解
可能为一个类写了多个构造器,有时可能想在一个构造器里面调用另外一个构造器,为了减少代码的重复,可用this关键字做到这一点. public class Flower { private String string; private int age; public Flower() { // 先调用public Flower(String string, int age) this("leon", 120); // 先调用public Flower(String string, int