大白话理解vue父传子props的过程

大白话理解整个过程：props理解为properties(属性的缩写)，巧计：props和parent都是p开头，那么就理解为是父传子，父传子内容，儿子要拿东西接收吧，那么此时，子就要用props来接收，传输的数据不可能永远都是一个吧，那么就要用数组来接收。即子组件里面要使用props数组，而且里面的内容自己定，毕竟是自己拿东西接受父亲传来的数据。儿子说我拿碗接收，那么父亲就要往碗里面传输数据。即父组件要动态绑定儿子里面props数组里面自定义的属性，这样就能建立一个通道传输数据了。

1.父组件向子组件传值

下面通过一个例子说明父组件如何向子组件传递数据：在子组件article.vue中如何获取父组件section.vue中的数据articles:[‘红楼梦’, ‘西游记’,‘三国演义’]

子组件 comarticle.vue

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

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

section父组件

<template>
  <div class="section">
    <comarticle :articles="articleList"></comarticle>
  </div>
</template>

<script>
import comArticle from './test/article.vue'
export default {
  name: 'HelloWorld',
  components: { comArticle },
  data() {
    return {
      articleList: ['红楼梦', '西游记', '三国演义']
    }
  }
}
</script>

总结: prop 只可以从上一级组件传递到下一级组件（父子组件），即所谓的单向数据流。而且 prop 只读，不可被修改，所有修改都会失效并警告。