vue組件傳值(通信)方式總結

使用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組件傳值對一點點小理解，希望大家多多指正