前言

大家好，這個(gè)系列我們來(lái)講解一下vue組件傳值的幾種常見(jiàn)方法和邏輯鏈路。最常見(jiàn)的vue組件傳值分為三種，第一種是父向子傳值，第二種是子向父?jìng)髦担谌N是兄弟組件之間的傳值，下面我們先就第一種情況來(lái)進(jìn)行分析和編寫。

第一種：父向子傳值

父向子傳值意思就是要把父組件里的值傳遞給子組件，方法是在子組件內(nèi)部自定義一個(gè)props屬性，通過(guò)props屬性來(lái)完成父子組件之間的數(shù)據(jù)傳輸。

新建文件導(dǎo)入結(jié)構(gòu)

首先我們?cè)赾omponents文件夾之下新建兩個(gè)文件分別是Father.vue和Son.vue，并在這兩個(gè)文件中通過(guò)shift + "<" 鍵快速生成結(jié)構(gòu)，如圖

引入 注冊(cè) 使用子組件

第二步，我們把Son作為子組件引入進(jìn)父組件，并完成注冊(cè)以及在template模板里使用Son的實(shí)例

<template>

<div class="box2">
  <!-- 使用Son的實(shí)例 -->
  <Son></Son>
  </div>

</template>

<script>
// 導(dǎo)入Son構(gòu)造函數(shù)
import Son from '@/components/Son.vue'

export default {
  // 在component中完成注冊(cè)
  components: {
    Son,
  },
}
</script>
<style lang="less"></style>

注意：這里style括號(hào)內(nèi)設(shè)置lang="less"，代表我們可以在style樣式結(jié)構(gòu)中使用less語(yǔ)句

子組件內(nèi)部代碼完善

第三步我們要在Son組件中完成我們自己的代碼書寫，首先我們可以在template模板中定義一個(gè)box盒子，里面放入幾個(gè)標(biāo)簽，并在其內(nèi)部放入插值表達(dá)式。接著我們要在子組件的導(dǎo)出模塊中定義一個(gè)props自定義屬性，這里我們采用數(shù)組的形式在其內(nèi)部定義兩個(gè)屬性分別是'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>

父組件內(nèi)部代碼完善

在父組件中，我們需要在data區(qū)域中返回兩個(gè)值，如圖

同時(shí)在template模板中，我們可以定義一個(gè)標(biāo)簽，在其內(nèi)部放入一個(gè)插值表達(dá)式檢驗(yàn)父組件自身是否已經(jīng)正確拿到值，

如圖：

同時(shí)，在Son實(shí)例中，我們將利用v-bind方法給它動(dòng)態(tài)綁定屬性，屬性名就是Son構(gòu)造函數(shù)中的props自定義屬性，值就是Father中data內(nèi)部定義的值

代碼如下：

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

<script>
// 導(dǎo)入Son構(gòu)造函數(shù)
import Son from '@/components/Son.vue'

export default {
  // 在component中完成注冊(cè)
  components: {
    Son,
  },

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

<style lang="less">
.box2 {
  // 父組件自身內(nèi)部標(biāo)簽
  h1 {
    color: orange;
  }
}
</style>

操作main.js文件

我們需要在main.js文件中導(dǎo)入父組件，取名為Father，并且在render區(qū)域?qū)⒏附M件的名字輸入進(jìn)去，

如圖：

運(yùn)行文件：

在終端里利用指令"npm run serve"來(lái)進(jìn)行文件編譯，打開(kāi)第一個(gè)網(wǎng)站查看效果

效果:

這樣我們就完成了整個(gè)父組件向子組件傳值的流程

思路總結(jié)

到這里，我們來(lái)大致厘清一下具體實(shí)現(xiàn)步驟

第一步，將子組件導(dǎo)入到父組件中，并完成在父組件內(nèi)部的注冊(cè)和使用

第二步：在子組件中設(shè)置自定義屬性props并為其添加幾個(gè)字符串作為在父組件中的屬性名

第三步：在子組件中的template模板中利用插值表達(dá)式來(lái)直觀的演示我們調(diào)試過(guò)后的結(jié)果

第四步：在父組件中對(duì)data區(qū)域進(jìn)行操作，return一個(gè)對(duì)象，提供渲染時(shí)所依賴的數(shù)據(jù)源

第五步，在父組件中的template模板中利用插值表達(dá)式來(lái)看父組件自身是否能接收到data中的值，并且為子組件的實(shí)例綁定動(dòng)態(tài)屬性

最后，在main.js中導(dǎo)入父組件，并且在render區(qū)域?qū)⒏附M件的名字輸入進(jìn)去，在終端里面利用指令"npm run serve"來(lái)進(jìn)行文件編譯，打開(kāi)網(wǎng)站查看效果

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

最新評(píng)論