一文掌握Vue组件的通信方法(上)

---

Vue组件中的六种通信方式(上)

一、父组件传数据子组件

父组件传子组件原理是使用属性绑定,然后子组件通过props接收

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

// section父组件
<template>
  <div class="section">
    <Article :articles="articleList"></Article>
  </div>
</template>

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

// 子组件 article.vue
<template>
  <div>
    <span v-for=