分享Vue元件傳值的幾種常用方式(一)

2022-09-12 18:00:29

前言

大家好，這個系列我們來講解一下vue元件傳值的幾種常見方法和邏輯鏈路。最常見的vue元件傳值分為三種，第一種是父向子傳值，第二種是子向父傳值，第三種是兄弟元件之間的傳值，下面我們先就第一種情況來進行分析和編寫。

第一種：父向子傳值

父向子傳值意思就是要把父元件裡的值傳遞給子元件，方法是在子元件內部自定義一個props屬性，通過props屬性來完成父子元件之間的資料傳輸。

新建檔案匯入結構

首先我們在components資料夾之下新建兩個檔案分別是Father.vue和Son.vue，並在這兩個檔案中通過shift + "<" 鍵快速生成結構，如圖

引入註冊使用子元件

第二步，我們把Son作為子元件引入進父元件，並完成註冊以及在template模板裡使用Son的範例

<template>

<div class="box2">
  <!-- 使用Son的範例 -->
  <Son></Son>
  </div>

</template>

<script>
// 匯入Son建構函式
import Son from '@/components/Son.vue'

export default {
  // 在component中完成註冊
  components: {
    Son,
  },
}
</script>
<style lang="less"></style>

注意：這裡style括號內設定lang="less"，代表我們可以在style樣式結構中使用less語句

子元件內部程式碼完善

第三步我們要在Son元件中完成我們自己的程式碼書寫，首先我們可以在template模板中定義一個box盒子，裡面放入幾個標籤，並在其內部放入插值表示式。接著我們要在子元件的匯出模組中定義一個props自定義屬性，這裡我們採用陣列的形式在其內部定義兩個屬性分別是'msg' 和 'age', 程式碼如下

<template>
  <div class="box">
    <h2>
      我是子元件，父元件給我傳遞的值是 ---{{ msg }}, 我今年
      <h3>{{ age }}</h3>
      歲啦
    </h2>
  </div>
</template>

<script>
export default {
  props: ['msg', 'age'],
}
</script>

<style lang="less">
.box {
  h2 {
    color: pink;
  }
  h3 {
    color: skyblue;
  }
}
</style>

父元件內部程式碼完善

在父元件中，我們需要在data區域中返回兩個值，如圖

同時在template模板中，我們可以定義一個標籤，在其內部放入一個插值表示式檢驗父元件自身是否已經正確拿到值，

如圖：

同時，在Son範例中，我們將利用v-bind方法給它動態繫結屬性，屬性名就是Son建構函式中的props自定義屬性，值就是Father中data內部定義的值

程式碼如下：

<template>
  <div class="box2">
    <!-- 使用Son的範例 -->
    <h1>我是父元件，我自身的值是--{{ dd }}</h1>
    <Son :msg="dd" :age="year"></Son>
  </div>
</template>

<script>
// 匯入Son建構函式
import Son from '@/components/Son.vue'

export default {
  // 在component中完成註冊
  components: {
    Son,
  },

  data() {
    return {
      dd: '加也加也',
      year: 15,
    }
  },
}
</script>

<style lang="less">
.box2 {
  // 父元件自身內部標籤
  h1 {
    color: orange;
  }
}
</style>

操作main.js檔案

我們需要在main.js檔案中匯入父元件，取名為Father，並且在render區域將父元件的名字輸入進去，

如圖：

執行檔案：

在終端裡利用指令"npm run serve"來進行檔案編譯，開啟第一個網站檢視效果

效果:

這樣我們就完成了整個父元件向子元件傳值的流程

思路總結

到這裡，我們來大致釐清一下具體實現步驟

第一步，將子元件匯入到父元件中，並完成在父元件內部的註冊和使用

第二步：在子元件中設定自定義屬性props併為其新增幾個字串作為在父元件中的屬性名

第三步：在子元件中的template模板中利用插值表示式來直觀的演示我們偵錯過後的結果

第四步：在父元件中對data區域進行操作，return一個物件，提供渲染時所依賴的資料來源

第五步，在父元件中的template模板中利用插值表示式來看父元件自身是否能接收到data中的值，並且為子元件的範例繫結動態屬性

最後，在main.js中匯入父元件，並且在render區域將父元件的名字輸入進去，在終端裡面利用指令"npm run serve"來進行檔案編譯，開啟網站檢視效果

到此這篇關於分享Vue元件傳值的幾種常用方式(一)的文章就介紹到這了,更多相關Vue元件傳值內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！