文章目录
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=