vue组件获取store,vue两个组件之间传值

  vue组件获取store,vue两个组件之间传值

  这篇文章主要介绍了某视频剪辑软件如何利用商店实现两个平行组件间的传值,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  

目录

  商店实现两个平行组件间的传值方法:利用商店。射流研究…传值平行组件传值的步骤1.布好局2.在控制台控制电路模板中用安装好的函数接收完整代码如下

  

store实现两个平行组件间的传值

  需求:把Login.vue的用户名传到索引。某视频剪辑软件中显示出来

  

方法:利用store.js传值

  Login.vue

  登录后跳转

  商店。射流研究…

  定义变量并从Login.vue中获取值

  索引。某视频剪辑软件

  定义变量,利用计算获取变量的值

  

平行组件传值的步骤

  

1.布好局

  然后新建一个对象var vue1=new Vue({}),利用vue1这个新对象作为中介传值,

  然后用vue1 .$emit(isa ,this.aaa)即把这个。美国汽车协会赋给工业标准结构

  方法:{

  塔帕(){

  vue1 .$emit(isa ,this.aaa)

  }

  }

  

2.在ccc模板中用mounted函数接收

  用$on( isa ,函数(消息){消息即为接收工业标准结构的值})

  已安装(){

  变那个=这个

  vue1 .$on(isa ,函数(msg1){

  that.isa=msg1

  })

  vue1 .$on(isb ,函数(msg2){

  that.isb=msg2

  })

  },

  

完整代码如下

  !声明文档类型

  html lang=en

  头

  meta charset=UTF-8

  meta name= viewport content= width=device-width,initial-scale=1.0

  meta http-equiv= X-UA-Compatible content= ie=edge

  脚本src=./vue。js /脚本

  标题文档/标题

  /头

  身体

  div id=应用程序

  氕平行组件/h1小时

  一个小时

  室壁/室壁整点

  室性心动过速

  /div

  模板id=aaa

  差异

  h1aaaa/h1

  h3{{aaa}}/h3

  button @click=tapa()a给控制台控制电路(控制台控制电路)传值/按钮

  /div

  /模板

  模板id=bbb

  差异

  h1bbbb/h1

  h3{{bbb}}/h3

  button @click=tapb()b给控制台控制电路(控制台控制电路)传值/按钮

  /div

  /模板

  模板id=ccc

  差异

  h1cccc/h1

  h3aaaa值:{{isa}}/h3

  h3bbbb值:{{isb}}/h3

  /div

  /模板

  /body

  脚本

  var vue1=新Vue({})

  var vue=新Vue({

  埃尔: #app ,

  数据:{

  },

  组件:{

  “v-a”:

  模板: #aaa ,

  数据:函数(){

  返回{

  AAA:’这是a的值

  }

  },

  方法:{

  塔帕(){

  vue1 .$emit(isa ,this.aaa)

  }

  }

  },

  “v-b”:

  模板:" #bbb ",

  数据:函数(){

  返回{

   bbb:这是b的值

  }

  },

  方法:{

  tapb(){

  vue1 .$emit(isb ,this.bbb)

  }

  }

  },

  "动词-动词":{

  模板:" #ccc ",

  数据:函数(){

  返回{

  伊莎:,

  isb:" "

  }

  },

  已安装(){

  变那个=这个

  vue1 .$on(isa ,函数(msg1){

  that.isa=msg1

  })

  vue1 .$on(isb ,函数(msg2){

  that.isb=msg2

  })

  },

  }

  }

  })

  /脚本

  /html

  以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: