vue的传值方式有哪些?vue中常用的传值方式介绍(3种)

本篇文章给大家带来的内容是关于vue的传值方式有哪些?vue中常用的传值方式介绍(3种),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

一. 父组件向子组件传值
    1. 使用props建立数据通道的渠道

       // 这是父组件       
          // 这是子组件                 

登录后复制

2 . 在子组件中通过props传递过来的数据

 Vue,component('child',{     props:['message'] })

登录后复制

二. 子组件向父组件传值
1. 子组件中需要一个点击事件触发一个自定义事件

Vue.component('child',{    methods:{        handleClick(){        // 在相应该点击事件的函数使用$emit来触发一个自定义事件,并传递一个参数            this.$emit('parentClick',123)        }    },    template:`        
            

这是子组件

                    
    `})

登录后复制

2.在父组件中的子标签监听该自定义事件得到传递的值

Vue.component('parent', {    data() {        return {            msg: '我是子组件'        }    },    methods: {        receiveMsg(value) {            console.log(value)            this.msg = value        }    },    template:'        
            

这是子组件

            

接收子组件传过来的值{{msg}}

                    
    '})

登录后复制

三. 非父子组件传值
有时候两个组件也需要传值(非父子关系),所以我们需要一个公共的vue来进行传递值和获取值  
1 . 创建一个空的vue

立即学习“前端免费学习笔记(深入)”;

  // 创建一个空的公共的vue对象    var bus = new Vue();

登录后复制

2 . 在组件1中,定义$emit来发送数据

bus.$emit('test','数据')

登录后复制

3 . 在组件2中使用$on来接收传递的数据

bus.$on('test', function(num) {     this.msg= num;       //事件的解绑问题         bus.$off("test") })

登录后复制

当然非父子传值的方法不只有一种我们也可以使用 localstorage 来传值和取值

// 在第一个组件中 setItem 设置值localstorage.setItem('test','数据')// 在第二个组件中 getItem 获取值localStorage.getItem("test");

登录后复制

相关推荐:

vue组件之间的传值方式

vue组件之间的传值方式

以上就是vue的传值方式有哪些?vue中常用的传值方式介绍(3种)的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2742810.html

(0)
上一篇 2025年3月8日 02:54:25
下一篇 2025年3月8日 02:54:32

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论