父組件向子組件傳值

下面通過一個例子說明父組件如何向子組件傳遞數據：在子組件article.vue中如何獲取父組件section.vue中的數據
articles:[‘紅樓夢’, ‘西遊記’,‘三國演義’]

// section父組件
<template>
  <div class="section">
    <com-article :articles="articleList"></com-article>
  </div>
</template>

<script>
import comArticle from './test/article.vue'
export default {
  name: 'HelloWorld',
  components: { comArticle },
  data() {
    return {
      articleList: ['紅樓夢', '西遊記', '三國演義']
    }
  }
}
</script>

// 子組件 article.vue
<template>
  <div>
    <span v-for="(item, index) in articles" :key="index">{{item}}</span>
  </div>
</template>

<script>
export default {
  props: ['articles']
}
</script>

總結: prop 只可以從上一級組件傳遞到下一級組件（父子組件），即所謂的單向數據流。而且 prop 只讀，不可被修改，所有修改都會失效並警告。

来源：https://blog.csdn.net/weixin_43529270/article/details/99547330