前言

大家好，在上一篇文章分享Vue組件傳值的幾種常用方式(一)中我們介紹了父組件向子組件傳值的相關(guān)流程，今天我們主要來(lái)學(xué)習(xí)子組件如何向父組件傳值。子向父?jìng)髦瞪婕暗降姆椒ǖ暮诵氖?“$.emit” , 我們將利用這一方法來(lái)實(shí)現(xiàn)既定目標(biāo)。

子向父?jìng)髦?/h2>

子向父?jìng)髦狄馑季褪且炎咏M件里的值傳遞給父組件，方法在子組件的methods模塊中利用$.emit，其內(nèi)部我們?cè)賮?lái)定義一個(gè)事件名和所要傳遞的值。

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

示例：

一 文件配置及模板生成

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

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

<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文件，因?yàn)榫幾g器在這里解析文件是從main.js開(kāi)始的

到此我們完成了文件的基本配置，下面我們就正式開(kāi)始學(xué)習(xí)子向父?jìng)髦?/p>

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

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

既然我們?cè)谏衔奶岬叫枰胻his.$emit來(lái)進(jìn)行傳值，那么接下來(lái)我們就在methods方法中定義一個(gè)名為SonSend的方法

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

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

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

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

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

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

這樣一來(lái)我們就完成了子組件向父組件的值傳遞過(guò)程

總結(jié)

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

代碼

Father.vue

<template>
  <div class="box2">
    <Son @Accept="Result"></Son>
    <h1>Father： 子組件傳遞過(guò)來(lái)的值是 ---{{ 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="請(qǐng)輸入您想傳遞的值"
      @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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論