一、props / $emit
父组件通过props的方式向子组件传递数据,而通过$emit 子组件可以向父组件通信。
1. 父组件向子组件传值
下面通过一个例子说明父组件如何向子组件传递数据:在子组件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 只读,不可被修改,所有修改都会失效并警告。
2. 子组件向父组件传值
对于$emit 我自己的理解是这样的: $emit绑定一个自定义事件, 当这个语句被执行时, 就会将参数arg传递给父组件,父组件通过v-on监听并接收参数。 通过一个例子,说明子组件如何向父组件传递数据。
在上个例子的基础上, 点击页面渲染出来的ariticle的item, 父组件中显示在数组中的下标
在这里插入代码片
// 父组件中
<template>
<div class="section">
<com-article :articles="articleList" @onEmitIndex="onEmitIndex"></com-article>
<p>{
{
currentIndex}}</p>
</div>
</template>
<script>
import comArticle from './test/article.vue'
export default {
name: 'HelloWorld',
components: {
comArticle },
data() {
return {
currentIndex: -1,
articleList: ['红楼梦', '西游记', '三国演义']
}
},
methods: {
onEmitIndex(idx) {
this.currentIndex = idx
}
}
}
</script>
在这里插入代码片
<template>
<div>
<div v-for="(item, index) in articles" :key="index" @click="emitIndex(index)">{
{
item}}</div>
</div>
</template>
<script>
export default {
props: ['articles'],
methods: {
emitIndex(index) {
this.$emit('onEmitIndex', index)
}
}
}
</script>
二、 $children / $parent
使用前提是指定已建立父子关系,子实例可以用this. p a r e n t 访 问 父 实 例 , 子 实 例 被 推 入 父 实 例 的 parent访问父实例,子实例被推入父实例的 parent访问父实例,子实例被推入父实例的children数组中
注意:节制使用 p a r e n t 和 parent和 parent和children 它们主要的目的是作为访问组件的应急方法。更推荐用props和events实现父子组件的通信
在这里插入代码片
// 父组件中
<<