技術標籤：vuevue.js

在Vue專案中如何使用props以實現父元件給子元件傳值？

這是父元件的template

<template>
  <el-container>
    <el-main id="video-main">
      <video-player :video="video"/>
      <video-comment :comment="comment" :video="video"/>
    </el-main>
 

  </el-container>
</template>

這是父元件的script

import VideoComment from './comment/VideoComment'
import VideoPlayer from './player/VideoPlayer'

export default {
  name: 'VideoMain',
  components: {
    VideoPlayer,
    VideoComment
  }
}

父元件有兩個子元件，分別是VideoPlayer和VideoComment。
如果父元件要給兩個子元件傳遞值，就需要使用props。

在父元件template區域，也就是這兩行程式碼的地方

<video-player :video="video"/>
<video-comment :comment="comment" :video="video"/>

VideoPlayer子元件的標籤裡面寫一個:video="video"或者v-bind:video=“video”，引號中的video是你要傳給子元件的值，可以是json物件，可以是字串等等。

這是VideoPlayer子元件的script

export default {
 

  name: 'VideoPlayer',
  props: ['video']
}

子元件定義一個props陣列，這裡面填入你在父元件繫結的名稱，:video或v-bind:video，這個video就是你要在子元件的props陣列中填入的名稱。

現在子元件就可以直接使用video這個資料了。
注意：並不需要使用this.video來使用，可能會出現錯誤提示。