vue组件之间传值几种方法

方法一、父子组件传值

通过props向下传递

父组件

<div class="menu_header"><Menu :msgChild="msg1" /></div>data() {return {msg1:'父组件的值',}}

子组件


<el-menu-item>{{msgChild}}</el-menu-itemexport default {name: "Menu",props:{msgChild:String},

方法二、子组件传值给父组件

通过$emit()向上传递

子组件
写在script也是一样的

  <el-menu-item@click="$emit('pushId',99)" >向上传递</el-menu-item>

父组件

 <Menu :msgChild="msg1" @pushId="getChildrenId" />import Menu from "@/components/menu/Menu";export default {components: {Menu,},methods: {getChildrenId(id){alert('子组件传递的值'+id)},
}

方法三、事件监听

父组件

   <Menu :msgChild="msg1" @pushId="getChildrenId"  ref="son"/>mounted(){this.$refs['son'].$on('func',(msg)=>{console.log(msg);})},

子组件

 <el-menu-item@click="$emit('func','我是子组件传递的消息1！')" >向上传递2</el-menu-item>

方法四、子组件之间传值

子组件之间传值，可以通过父组件做为桥梁，传值
但过于繁琐，不推荐，我们可以新建中间文件

新建文件
bus.js

import Vue from 'vue'
export  default new Vue()

然后组件之间引入改文件
组件1

      <el-buttontype="danger"class="anniu1"size="mini"@click="readmsg">触发组件</el-button>

import Bus from '@/bus.js'export default {methods: {readmsg(){Bus.$emit('pushData','传递给其他子组件的值')},}
}

组件2

import Bus from '@/bus.js'
export default {mounted() {Bus.$on('pushData',(msg)=>{alert(msg)})}
}

方法五、EventBus传参

1、在main.js种挂载全局EventBus
效果和方法四是一样的，使用起来更方便

//main.js
Vue.prototype.$EventBus = new Vue()//挂载全局EventBus

组件1

  readmsg(){this.$EventBus.$emit('pushData','传递给其他子组件的值')},

组件2

 mounted() {this.$EventBus.$on('pushData',(msg)=>{alert(msg)})}

方法六、消息发布与订阅

安装 pubsub-js 插件： npm i pubsub-js -s 可实现全局参数传递
组件1

<template><div class="wrap"><div>我是组件A</div><button @click="sendMsg">发送</button></div>
</template><script>import  pubsub from 'pubsub-js'export default {name: "A",methods:{sendMsg(){pubsub.publishSync("sendMsg","这是A组件发布的消息！");}}}
</script>

组件2

<template><div><div>我是组件B</div></div>
</template><script>import pubsub from 'pubsub-js'export default {name: "B",mounted(){pubsub.subscribe("sendMsg",(e,msg)=>{console.log(e,msg);//sendMsg 这是A组件发布的消息！})},}
</script>

publishSync
同步发送消息
publish
同步发送消息
subscribe
订阅消息
unsubscribe
卸载特定订阅
clearAllSubscriptions
清除所有订阅

vue组件之间传值几种方法相关推荐

Vue组件之间传值的几种方法 (直接上代码)
vue组件之间传值的几种方法总结一. props(父传子) 父组件传递 <template><div><HelloWorld :msg="msg" ...
vue组件之间传值方式方法---实战面试篇
vue组件之间传值方式方法 vue组件传值 vue组件化什么是组件化? vue组件通讯父组件向子组件传值子组件向父组件传值兄弟组件传值总结 vue组件传值最近准备面试跳槽.说到前端面试,有 ...
深入理解Vue 组件之间传值
一.父组件向子组件传递数据在 Vue 中,可以使用props向子组件传递数据. 子组件部分: 这是 header.vue 的 HTML 部分,logo 是在 data 中定义的变量. 如果需要从父组 ...
vue组件通信的几种方法
vue中我们最常使用的就是父子之间的通信还有全局数据管理vuex了,下面粗略说一下vue组件通信的几种方法组件通信的几种方式 1.父子组件通信 2.兄弟组件通信 3.跨多层级组件通信 4.任意组件( ...
Vue组件之间传值/调用方法的几种方式
组件之间传值/调用方法的几种方式 (一)父组件向子组件传值==props 1.在父组件中使用子组件的地方绑定数据 <children :message="message"&g ...
vue组件之间传值的几种方式
vue组件传值父子组件之间传值.几种常见方式第一种方式(父传子) 父组件 <m-child :childMsg="parentMsg"></m-child&g ...
vue 组件之间传值父转子，子传父，同级别之间的传参，跨级别传参
写这篇文章之前,我对vue组件之间的传值,还是只知道一些基础的传值方式.虽然工作中勉强能够应对,但是想要行云流水感觉还是心有余而力不足,所以在此,我想总结一下vue组件之间的一些传值方式供大家参考,同 ...
vue组件之间传值(详细版)
在vue实际开发中,经常会碰到组件之间传值的需求,特此记录父向子组件传值(向下传值) 父组件 <template> <div id="father">&l ...
vue组件间传值的六种方法
一. vue组件间传值 1. 父组件向子组件进行传值props 父组件代码: <template><div>父组件:<input type="text" ...

vue组件之间传值几种方法

方法一、父子组件传值

方法二、子组件传值给父组件

方法三、事件监听

方法四、子组件之间传值

方法五、EventBus传参

方法六、消息发布与订阅

vue组件之间传值几种方法相关推荐

最新文章

热门文章