vue调用函数怎么传参_Vue(非)父子组件的传值以及方法调用

1.vue父组件给子组件传值的方法

子组件中通过props接收传值

props:{

username:{

type:String,

default:""

}

2.vue父组件调用子组件的方法

this.$refs.header.子组件的方法

3.子组件传值给父组件

一般通过点击事件

this.$emit("getName",this.msg)

在这里注册一个事件，把值通过事件带过去。

然后在父组件中通过

在methods中可以通过

getNamefromchild(data){

data就是传过来的值

}

4.子组件调用父组件的方法

在子组件中

diaoyongparent(){

this.$emit("diaoyongParentfunc")

这里可以带参数

}

然后在父组件中

diaoyongbychild(){

alert("调用父组件的方法了，如果有参数也可以哦")

}

5.对于非父子组件的传值

首先在main.js里面定义Vue对象的时候在data属性里面创建一个变量，并赋值为一个vue对象，这个变量在整个应用中都可以直接访问，他可以充当EventHub事件中心

new Vue({

el:"#app",

router,

store,

components:{App},

data:{

Hub:new Vue()

}

})

然后在第一个组件里面

gotoside(){

this.$root.Hub.$emit("oneEvent",this.msg)

}

然后在第二个组件里面

created(){

this.$root.Hub.$on("oneEvent",function(msg){

alert(msg)

})

}

vue调用函数怎么传参_Vue(非)父子组件的传值以及方法调用相关推荐

vue中父子组件先后渲染_vue父子组件传值（子传父，非父子组件传值）
1. 子组件向父组件传值子组件: <template><div>子组件:<span>{{childValue}}</span><!-- 定义一个 ...
vue组件间传值: 父传子、子传父、非父子组件传值
父组件向子组件传值 // 父组件通过属性将值传递给子组件 <template><div><closePopup :optionsID="optionsID&qu ...
vue 父子组件传值以及方法调用，平行组件之间传值以及方法调用大全
vue项目经常需要组件间的传值以及方法调用,具体场景就不说了,都知道.基本上所有的传值都可以用vuex状态管理来实现,只要在组件内监听vuex就好. vue常用的传值方式以及方法有: 1. 父值传子( ...
Vue2.0的三种常用传值方式、父传子、子传父、非父子组件传值
Vue2.0 传值方式: 在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来.这时必然会产生一些疑问和需求?比如一个组件调用另一个组件作为自己的子组件,那么我 ...
Vue中父子及非父子组件之间的通信方法
Vue中父子及非父子组件之间的通信方法父子组件之间的通信方法父级->子级通信 (依赖单向数据绑定+props实现) Vue.component('Father', { //注册了含有data ...
组件间数据交互——父组件向子组件传值（ props属性值类型）子组件向父组件传值-携带参数 || 非父子组件间传值
父组件向子组件传值 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
vue父子组件之间传值的方法
vue父子组件之间传值的方法一.基本父子传值父传子方式: props 效果: 把父组件的fatherName属性传入子组件,在子组件中使用父组件代码: <template>< ...
vue模块给模块传参_Vue店面的Paypal支付模块
vue模块给模块传参 Vue店面PayPal付款扩展 (Vue Storefront PayPal Payment Extension) PayPal Payment module for vue-s ...
Vue组件化开发--组件通信方式-父传子、子传父、非父子组件传值
一.概述以脚手架搭建的Vue项目为笔记背景. 如果将所有的代码逻辑全部放到一个组件中,代码是非常的臃肿和难以维护的. 并且在真实开发中,可能会有更多的内容和代码逻辑,对于扩展性和可维护性来说都是非常 ...

vue调用函数怎么传参_Vue(非)父子组件的传值以及方法调用

vue调用函数怎么传参_Vue(非)父子组件的传值以及方法调用相关推荐

最新文章

热门文章