vue组件传值(通信)方式总结

小鱼儿 2022-05-19 13:07 343阅读 0赞

使用VUE开发有一段时间了，一直都没有整理一下相关知识，今天总结下开发过程中所遇到的一些坑，主要给大家总结一下VUE组件传值的几种常用方法：

### 1，路由传参（参数，可以查询）： ###

这种传参方式个人比较喜欢（也比较常用吧）它只需要在路由跳转的时候将对应的参数以对象的形式写入：

this.$router.push({name: 'routePage',query/params: {  routeParams: params }})

这样使用起来很方便，但url会变得很长，而且如果不是使用路由跳转的界面无法使用对应的取值方式分别为：

this.$route.params.paramName || this.$route.query.paramName

需要注意的是，实用params去传值的时候，在页面刷新时，参数会消失，用查询则不会有这个问题。

注：使用PARAMS传值，也可以做到页面刷新，参数不丢失，不过在命名路由时需要在路径这样设置：

{
          path: '/test1/:orderId/:type',
          name: 'test1',
          component: test1
    }

使用时

this.$router.push({name: 'test2', params: {orderId: id, type: 'buy'}})

### 2，父子通信 ###

子传父：

子组件child.vue

<template>
      <div class="child">
        <h1>子组件</h1>
        <button v-on:click="toParents">向父组件传值</button>
      </div>
    </template>
    
    <script>
      export default{
        name: 'child',
        data(){
          return {}
       },
    
        methods: {
          toParents(){
            this.$emit("toParentsMsg", "子组件向父组件传值");
          }
        }
      }
    </script>
    
    <style>
    </style>

父组件：parents.vue

<template>
      <div class="parents">
        <h1>父组件</h1>
        <Child v-on:toParentMsg="childToParentMsg" ></Child>
      </div>
    </template>
    
    <script>
      import Child from './child/child.vue'
      export default{
          name:"parents",
        data(){
          return {
          }
        },
        methods: {
          childToParentMsg:function(data){
            alert("父组件显示信息："+data)
          }
        },
        components: {Child}
      }
    </script>
    
    <style>
    </style>

父传子：

子组件：child.vue

<template>
    
      <div class="child">
        <h1>子组件</h1>
        <span>子组件显示信息：{
       {toChild}}</span><br>
      </div>
    
    </template>
    
    <script>
      export default{
        name: 'child',
        data(){
          return {}
        },
        props:["toChild"]
      }
    
    </script>
    
    <style>
    </style>

父组件：parents.vue

<template>
    
      <div class="parents">
        <h1>父组件</h1>
        <Child v-bind:toChild="parentMsg"></Child>
      </div>
    
    </template>
    
    <script>
      import Child from './child/child.vue'
      export default{
         name:"parents",
        data(){
          return {
            parentMsg:'父组件向子组件传值'
          }
        },
        components: {Child}
      }
    </script>
    
    <style>
    </style>

### 3，eventbus（非父子（同级）组件之间） ###

使用eventbus的方法很是简单，我们需要做三步事情，

3.1，创造一个容器去充当我们的eventbus：

在main.js全局定义一个eventBus

window.eventBus = new Vue()

3.2，抛出，或者说提交事件（eventBus。$发出）

组件一

<template>
      <div class="mybustest1">
        <button @click="get">点击发送数值到eventbus中</button>
      </div>
    
    </template>
    
    <script>
      export default {
        name: "mybustest1",
        methods: {
          get: function() {
            console.log("Aaa");
            eventBus.$emit('eventBusName', "mytestvalue");
          }
        },
      }
    </script>
    
    <style>
    
    </style>

第三步，监听事件eventBus。$上上

组件2

<template>
      <div class="mybustest2">
        <button @click="method1">点击console.log出eventbus的信息
        </button>
      </div>
    </template>
    
    <script>
      export default {
        name: "mybustest2",
        data(){
          return {
            diplay:false
          }
        },
        methods: {
          method1: function() {
            //使用on来监听事件
            eventBus.$on('eventBusName', function(val) {
              console.log("这个是mybustest2的val值为："+val)
            })
          }
        }
      }
    </script>
    <style>
    
    </style>

查看效果

在App.vue中引入，先点击<mybustest1 />传入mytestvalue，再点击<mybustest2 />接收，然后再次点击<mybustest1 />查看控制台打印值是否传入

<template>
      <div id="app">
        <router-view/>
        <mybustest1/>
        <mybustest2/>
      </div>
    </template>
    
    <script>
      import mybustest2 from "./components/mybustest2"
    export default {
      name: 'App',
      components:{
        mybustest2
      }
    }
    </script>
    
    <style>
    #app {
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

以上就是个人对VUE组件传值对一点点小理解，希望大家多多指正