vue父組件傳參給子組件

其實組件之間傳參有很多種方法：

1.通過本地存儲

2.使用vuex狀態管理

今天記錄一下第三種方法

 

1.首頁我們先創建一個項目(創建項目自行百度)

2.打開項目，在components文件夾下新建一個vue文件，我這邊以header.vue為例（這個是子組件）：

template部分

<template>
  <section class="chind">
    <div>{{userName}}</div>
  </section>
</template>

js部分

<script>
export default {
  props:['userName']//主要是通過props來接受父組件傳過來的值
}
</script>

3.找到App.vue這個文件，如果使用vue-cli創建的項目，里面會自動生成這個文件的（這是父組件）

template部分

<template>
  <section class="chind">
    <!--注意下面的userName和子組件props里面的參數要一致-->
    <test :userName="兔子先生"></test>
  </section>
</template>

解釋：<test :userName="兔子先生"></test> 兔子先生就是需要傳給子組件的值，你也可以把它變成動態的，在當前vue文件的data里面定義即可。

js部分

<script>
//引入子組件 名稱可以隨意 我這邊是test
import test from './components/header'
export default {
  components:{
    test
  }
}
</script>

 

總結：

  1父組件給子組件傳參主要是通過props來實現的。

  2在父組件的test標簽里面定義一個屬性，並且將要傳的值 賦值給這個屬性。

  3而在子組件里，直接通過props 即可獲取你在父組件上的test標簽里面定義的屬性了。然后可以直接在子組件的頁面上使用，無需在data中定義。