vue中的組件傳值

概述

vue中組件之間的傳值傳值情況主要有以下三種

• 父組件向子組件傳值
• 子組件向父組件傳值
• 兄弟組件之間相互傳值或者是兩個沒有關系的組件之間的傳值

在開始介紹之前我們先建立3個vue文件，文件名分別為:Parent.vue , Child1.vue , Child2.vue

parent.vue

child1.vue

Child2.vue

bus。js

 

父組件向子組件傳值

這種情況是三種傳值方案中最簡單的, 通過在子組件中使用 props就可以實現

父組件Parent.vue中的代碼

<template>
  <div>
    <child-1  :btnName="btnName"/> </div> </template> <script> import Child1 from './Child1' export default { name: 'Parent', components: { 'child-1': Child1 }, data () { return { btnName: ' 我是一個button' } } } </script> 復制代碼

子組件Child1.vue

<template>
    <button > {{btnName}}</button>
</template>
<script>
export default { name: 'Child1', props: ['btnName'] } </script> <style> button{ padding:5px 10px; margin:2px; background-color:#fff; border-radius: 5px; } </style> 復制代碼

關鍵點就是需要在子組件中 使用 props 關鍵字 來接收父組件傳過來的值

顯示效果如下

 

子組件向父組件傳值

在子組件向父組件傳值時需要使用 vue 中的 $on 和 $emit ，使用$emit 可以觸發 $on 中監聽的事件，現在我們來實現一個可以統計按鈕點擊次數的功能

在父組件中有個 count 字段用於統計，button點擊的次數

首先我們需要在Parent.vue的data中定義count變量，默認值為0，代碼如下：

data () { return { btnName: ' 我是一個button', count: 0 } } 復制代碼

然后將count加入到template中便於顯示, 此時parent.vue的template的代碼如下

<template>
  <div>
    <p>點擊次數: {{count}}</p>
    <child-1  :btnName="btnName"/> </div> </template> 復制代碼

count加上后頁面的顯示效果如下：

 

接下來我們需要在父組件中增加一個可以改變count值的事件,同時在 中加上監聽事件

 

<template>
  <div>
    <p>點擊次數: {{count}}</p>
    <child-1  :btnName="btnName" @update:count="changeCount"/> </div> </template> <script> import Child1 from './Child1' export default { name: 'Parent', components: { 'child-1': Child1 }, data () { return { btnName: ' 我是一個button', count: 0 } }, methods: { changeCount () { ++this.count } } } </script> 復制代碼

子組件Child1.vue

<template>
    <button @click="clickHandle"> {{btnName}}</button> </template> <script> export default { name: 'Child1', props: ['btnName'], methods: { clickHandle () { this.$emit('update:count') } } } </script> 復制代碼

現在通過點擊button即可實現改變count的值

兄弟組件之間的傳值

兄弟組件之間傳值有兩種方式：

1. 將需要改變的值放到父組件中，子組件通過props來獲取父組件的值
2. 通過eventbus 來實現兄弟組件之間的傳值，其原理還是通過$on和$emit來時實現的，區別是現在全局建立一個空的vue對象，然后將事件綁定到該空對象上，最后通過該空對象來觸發$on監聽的事件

現在還是通過上面的例子來實現說明這兩種情況

在開始之前需要新建一個組件Child2,然后將count移動到child2中,然后在parent中引入child2

Child2.vue

<template>
    <p>點擊次數: {{count}}</p>
</template>
<script>
export default{ name: 'Child2', props: ['count'] } </script> 復制代碼

Parent.vue

<template>
  <div>
      <child-2 />
      <child-1  :btnName="btnName"/> </div> </template> <script> import Child1 from './Child1' import Child2 from './Child2' export default { name: 'Parent', components: { 'child-1': Child1, 'child-2': Child2 }, data () { return { btnName: ' 我是一個button' } } } </script> 復制代碼

此時點擊button 即可實現統計功能，但是這種方式不太好的地方是它會通過父組件來進行過度，那樣就會涉及到對父組件的修改，如果要改變的變量很多，則需要在父組件中聲明很多變量，然后在傳到子組件中進行修改，既然是兄弟組件之間的傳值，那么有沒有辦法直接跳過父組件，讓兄弟組件之間直接進行交流，這個時候就需要用到eventbus 首先創建一個bus.js的文件 ，在文件中我們需要創建一個空vue對象，代碼如下：

import Vue from 'vue' export default new Vue() 復制代碼

然后在 Child1和Child2中引入該文件

此時parent.vue , child1.vue , child2.vue 他們的代碼分別如下

Parent.vue

<template>
  <div>
      <child-2 />
      <child-1  :btnName="btnName"/> </div> </template> <script> import Child1 from './Child1' import Child2 from './Child2' export default { name: 'Parent', components: { 'child-1': Child1, 'child-2': Child2 }, data () { return { btnName: ' 我是一個button' } } } </script> 復制代碼

Child1.vue

<template>
    <button @click="clickHandle"> {{btnName}}</button> </template> <script> import Event from '../bus' export default { name: 'Child1', props: ['btnName'], methods: { clickHandle () { Event.$emit('update:count') } } } </script> <style> button{ padding:5px 10px; margin:2px; background-color:#fff; border-radius: 5px; } </style> 復制代碼

Child2.vue

<template>
    <p>點擊次數: {{count}}</p>
</template>
<script>
import Event from '../bus' export default{ name: 'Child2', data () { return { count: 0 } }, created () { Event.$on('update:count', () => { ++this.count }) } } </script> 復制代碼

eventbus這種方式不僅可以用到兄弟組件之間，它還可以用到任意兩個不想關聯的組件之間，但是如果大量使用的話不太利於管理，比如可能會照成命名的沖突。在比較復雜的系統中可以考慮是用vuex

在上面的例子中$on ,$emit 並沒有直接傳值過去，如果需要傳值，可用如下格式：

this.$on('test', function (msg) { console.log(msg) }) this.$emit('test', 'hi') // => "hi" 復制代碼

附錄

vue中的事件類型（轉載自官網）：

vm.$on( event, callback )

參數：

• {string | Array} event (數組只在 2.2.0+ 中支持)
• {Function} callback

用法： 監聽當前實例上的自定義事件。事件可以由vm.$emit觸發。回調函數會接收所有傳入事件觸發函數的額外參數。

示例：

vm.$on('test', function (msg) { console.log(msg) }) vm.$emit('test', 'hi') // => "hi" 復制代碼

vm.$once( event, callback )

參數：

• {string} event
• {Function} callback

用法： 監聽一個自定義事件，但是只觸發一次，在第一次觸發之后移除監聽器

vm.$off( [event, callback] )

參數：

• {string | Array} event (只在 2.2.2+ 支持數組)
• {Function} [callback]

用法：

• 移除自定義事件監聽器。
• 如果沒有提供參數，則移除所有的事件監聽器；
• 如果只提供了事件，則移除該事件所有的監聽器；
• 如果同時提供了事件與回調，則只移除這個回調的監聽器。

vm.$emit( event, […args] )

參數：

• {string} event
• [...args]

觸發當前實例上的事件。附加參數都會傳給監聽器回調。