mehuiei 2022-04-13 16:39 采纳率: 42.9%
浏览 224

uniapp中VUE事件总线操作

在使用VUE的事件总线时,数据已经能够成功传递了,但是无法将其修改到data数据中,传递的数据只能在$on中使用

这是uniapp中使用的代码,这是传值的组件(非父子组件),当点击跳转的时候,通过sendMsg方法传值,值是可以传过去的

            <navigator :url="'/pages/test/test'" @click="sendMsg(article.path)">

这是methods中定义的sendMsg方法

  sendMsg(path){
                this.path = path
                this.$bus.$emit('sendMsg',path)
            }

接着在需要被传值的组件中的mounted中进行接收

mounted() {
        this.$bus.$on('sendMsg',(data)=>{
            this.path = data
            console.log(data)
        })
        },

data成功打印

如果想加上对data中数据的修改也是可以的

mounted() {
        this.$bus.$on('sendMsg',(data)=>{
            this.path = data
            console.log(data)
            console.log(this.path)
        })
        },

此时在$on中打印this.path值为data

但是data值并不会做更改并显示到页面中

img

##需要被传值的组件代码


<template>
    <view>
        <text>{{path}}</text>
    </view>
</template>

<script>
    export default {
        name:'test',
        data() {
            return {
                path:'asfas'
            }
        },
        created(){
            this.$bus.$off('sendMsg')
        },
        mounted() {
        this.$bus.$on('sendMsg',(data)=>{
            this.path = data
            console.log(data)
            console.log(this.path)
        })
        },
        methods:{
    
        }
    }
</script>

试过将this.path值传递给data
this.path值能成功传递

img

请问要如何在点击之后传值并且实时更新插值表达式,也就是data中path的数据?

  • 写回答

2条回答 默认 最新

  • aliang 2022-04-14 17:34
    关注

    没看出啥毛病,先把这个注释掉看看?
    created(){
    //this.$bus.$off('sendMsg')
    },

    评论

报告相同问题?

问题事件

  • 修改了问题 4月13日
  • 修改了问题 4月13日
  • 创建了问题 4月13日

悬赏问题

  • ¥15 在centos7安装conda
  • ¥15 c#调用yolo3 dll文件获取的数据对不上
  • ¥20 WPF 如何实现多语言,label 和cs(live Charts)中是否都能翻译
  • ¥15 STM32F103上电短路问题
  • ¥15 关于#单片机#的问题:以ATMEGA128或相近型号单片机为控制器设计直流电机调速的闭环控制系统(相关搜索:设计报告|软件设计|流程图)
  • ¥15 打开软件提示错误:failed to get wglChoosePixelFormatARB
  • ¥15 (标签-python|关键词-char)
  • ¥15 python+selenium,在新增时弹出了一个输入框
  • ¥15 苹果验机结果的api接口哪里有??单次调用1毛钱及以下。
  • ¥20 学生成绩管理系统设计