Vue通信，传值的多种方式

最新推荐文章于 2025-04-01 15:50:36 发布

maqinyao5566

最新推荐文章于 2025-04-01 15:50:36 发布

阅读量622

点赞数 1

分类专栏： VUE-learnning 文章标签： VUE

本文链接：https://blog.youkuaiyun.com/maqinyao5566/article/details/80472148

版权

VUE-learnning 专栏收录该内容

1 篇文章

订阅专栏

博客借鉴于：https://blog.youkuaiyun.com/qq_35430000/article/details/79291287

一、通过router(路由)带参数进行传值

1.两个组件A和B，A组件通过query把orderld传送给B组件（触发事件可以是点击事件、钩子函数等）

(1)html中的形式添加路由

 <router-link :to={path:'/list',query:{people}}>列表页</router-link>

(2)js中的形式添加路由

this.$router.push({path:'/list',query:{people:123}})

二、通过设置SessionStorage缓存的形式进行传递

1）两个组件A和B，在A组件中设置缓存orderData

const orderData={'orderId':123,'price':88};
sessionStorage.setItem('缓存名称',JSON.stringify(orderData))

2)B组件就可以获取在A中设置的缓存了

const dataB=JSON.parse(sessionStorage.getItem('缓存名称'))

三、父子组件之间的传值

1.父组件往子组件传值props

 <body>
    <div id="app">
        父亲{{money}}
        <child :m="money"></child>
        <!-- <child ></child> -->
    </div>
   <script src="node_modules/vue/dist/vue.js"></script>
   <script>
       let vm=new Vue({
           el:'#app',
           data:{
               money:400,
               a:1
           },
           components:{
               child:{
                   //props:['m','a'],//this.m=100;会在当前子组件上声明一个M的属性值是父亲的
                   props:{//对象的形式可以进行校验
                   m:{//校验属性的类型，如果不带:号得到的肯定字符串类型 :m='1'数字 :m='Boolean 布尔
                       type:[String,Boolean,Function,Object,Array,Number],
                       default:0,//如果M是必须赋予值，就不用default
                       //required:true//此属性是必须传递，但是不能和default同用
                       //自定义校验器
                       validator(val){//第一个参数是当前传递的值（用的不是很多）
                       return val>300

                       }
                   }

                   },
                   template:'<div>儿子{{m}}</div>'
               }
           }
       })
   </script>
  </body>

2）子组件往负组件传值，通过emit事件

body>
    <div id="app">
        父亲：{{money}}
        <!-- <child :m="money" @child-msg="things"></child> -->
            <!-- <child @update:m="val=>this.money=val" :m="money"></child> -->
        <child :m.sync="money"></child>
        <!-- 写的时候不用，语法糖sync -->
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
     let vm=new Vue({
         el:'#app',
         data:{
            money:400
         },
         methods:{
             things(val){
                //  alert(val);
                this.money=val;
             }
         },
         components:{
            child:{
                props:['m'],
                template:'<div>儿子:{{m}}<button @click="addMoney()">钱不多</button></div>',
                methods:{
                    addMoney(){
                        // this.$emit('child-msg',800);
                        this.$emit('update:m',800)
                    }
                }
            }
         }
     })
    </script>
</body>

四、不同组件之间传值，通过eventsBus(小项目少页面用eventBus,大项目多页面使用vuex)

<body>
    <div id="app">
        <brother1></brother1>
        <brother2></brother2>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        let eventBus=new Vue;
        let brother1 = {
            template: '<div>{{color}}<button @click="change">变绿</button></div>',
            data() {
                return {
                    color: '绿色',
                    old: '绿色'

                }
            },
            created() {
                eventBus.$on('changeRed', (val) => {
                    this.color = val;
                })
            },
            methods:{
                change(){
                    eventBus.$emit('changeGreen',this.old);
                }
            }

        }
        let brother2 = {
            template: '<div>{{color}}<button @click="change">变红</button></div>',
            data() {
                return {
                    color: '红色',
                    old: '红色'
                }
            },
            created() {
                eventBus.$on('changeGreen', (val) => {
                    this.color = val;
                })
            },
            methods:{
                change(){
                    eventBus.$emit('changeRed',this.old);
                }
            }

        }
        let vm = new Vue({
            el: '#app',
            components: {
                brother1, brother2
            }
        })
    </script>
</body>

五，负组件主动获取子组件的数据和方法

1.调用子组件的时候定义一个ref

<v-header ref="header"></v-header>

2.在负组件里面获取属性方法（类似于操作dom）

this.$refs.header.属性

this.$refs.header.方法

六，子组件主动获取父组件的数据和方法

this.$parent.数据
this.$parent.方法

六、vuex进行传值

如：需求：两个组件A和B，vuex维护的公共数据是餐馆的名称 resturantName,默认餐馆名称是飞歌餐馆，那么现在A和B页面显示的就是飞歌餐馆。如果A修改餐馆名称为 A餐馆，则B页面显示的将会是 A餐馆，反之B修改同理。这就是vuex维护公共状态或数据的魅力，在一个地方修改了数据，在这个项目的其他页面都会变成这个数据。