前言

大家好，在上一篇文章分享Vue組件傳值的幾種常用方式(一)中我們介紹了父組件向子組件傳值的相關(guān)流程，今天我們主要來學(xué)習(xí)子組件如何向父組件傳值。子向父傳值涉及到的方法的核心是 “$.emit” , 我們將利用這一方法來實現(xiàn)既定目標。

子向父傳值

子向父傳值意思就是要把子組件里的值傳遞給父組件，方法在子組件的methods模塊中利用$.emit，其內(nèi)部我們再來定義一個事件名和所要傳遞的值。

目標：在子組件內(nèi)的輸入框中輸入的值，會顯示在父組件文本的相應(yīng)區(qū)域

示例：

一 文件配置及模板生成

關(guān)于vue文件的格式上一篇文章中已經(jīng)講過，這里就不詳細講了，這里稍微講一下文件的導(dǎo)入導(dǎo)出以及操作main.js文件等。

第一步，在Father組件和Son組件中快速生成模板，并將Son.vue導(dǎo)入進Father中完成注冊，再使用Son組件的實例

<template>
  <div class="box2">
    <Son></Son>    
  </div>
</template>

<script>
import Son from '@/components/Son.vue'
export default {
  components: {
    Son,
  },
}
</script>

<style lang="less"></style>

第二步，完善main.js文件，因為編譯器在這里解析文件是從main.js開始的

到此我們完成了文件的基本配置，下面我們就正式開始學(xué)習(xí)子向父傳值

二 Son組件內(nèi)部處理

首先我們在Son組件中的template模板中完善ul結(jié)構(gòu)，我們需要在名為box的dix盒子內(nèi)部創(chuàng)建一個輸入框，然后為它綁定一個input事件，方法名為SonSend，里面?zhèn)鬟f一個參數(shù)，獲取到我們在輸入框中輸入的值

既然我們在上文提到需要利用this.$emit來進行傳值，那么接下來我們就在methods方法中定義一個名為SonSend的方法

注意此時參數(shù)e就是輸入框中輸入的值，我們需要把這個參數(shù)e傳遞給父組件中，而前面的 ‘Accept’ 字符串就是我們要傳遞給父組件并且在Son實例上定義的事件名，這里的this指向的是這個export default導(dǎo)出模塊

三 Father組件內(nèi)部處理

那在Father父組件中，我們需要在實例Son身上注冊一個Accept事件，方法名設(shè)置成Result。接著我們要在父組件的導(dǎo)出模塊中定義一個data數(shù)據(jù)，屬性名為res，值為0，并且我們要在template中定義一個h1標簽，在其內(nèi)部創(chuàng)建一個插值表達式，用來顯示我們是否已經(jīng)正確的拿到子組件傳遞過來的值

date數(shù)據(jù)：

現(xiàn)在我們需要在父組件的methods中定義一個Result方法，內(nèi)部接收一個val參數(shù)，這個參數(shù)就是子組件傳遞過來的數(shù)據(jù)。在函數(shù)體內(nèi)，我們把val參數(shù)的值賦值給res，這樣我們就完善了res值的更改條件

接著我們運行"npm run serve"來查看頁面上的內(nèi)容

這樣一來我們就完成了子組件向父組件的值傳遞過程

總結(jié)

• 子組件的傳遞的核心重點是子組件內(nèi)部的this.emit('要傳遞的事件名', this.xxx)
• 在父組件中我們需要給子組件的實例身上綁定事件，而不是其他地方，注意事件名是子組件傳遞過來的那組字符串
• 需要在父組件內(nèi)部的methods中定義方法，改變data數(shù)據(jù)源的值，實現(xiàn)原有數(shù)據(jù)的覆蓋
• 方法中的參數(shù)就是子組件傳遞過來的值，在本案例中就是我們輸入的值

代碼

Father.vue

<template>
  <div class="box2">
    <Son @Accept="Result"></Son>
    <h1>Father： 子組件傳遞過來的值是 ---{{ res }}</h1>
  </div>
</template>

<script>
import Son from '@/components/Son.vue'

export default {
  components: {
    Son,
  },

  data() {
    return {
      res: 0,
    }
  },

  methods: {
    Result(val) {
      this.res = val
      console.log(val)
    },
  },
}
</script>

<style lang="less"></style>

Son.vue

<template>
  <div class="box">
    Son:
    <input
      type="text"
      placeholder="請輸入您想傳遞的值"
      @input="SonSend($event.target.value)"
    />
  </div>
</template>

<script>
export default {
  methods: {
    SonSend(e) {
      this.$emit('Accept', e)
      console.log(e)
    },
  },
}
</script>

<style lang="less"></style>

到此這篇關(guān)于分享Vue組件傳值的幾種常用方式(二)的文章就介紹到這了,更多相關(guān)Vue組件傳值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論