vue中调用方法时传参_vue中8种组件传参方式

​vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要，那么组件之间如何进行数据通信的呢？ 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好像过年回家，坐着一屋子的陌生人，相互之间怎么称呼，这时就需要先知道自己和他们之间是什么样的关系。 vue组件中关系说明:

我们归类为：

父子组件之间通信

非父子组件之间通信(兄弟组件、隔代关系组件等)

本文会介绍组件间通信的8种方式如下图目录所示:并介绍在不同的场景下如何选择有效方式实现的组件间通信方式，希望可以帮助小伙伴们更好理解组件间的通信。

一、props / $emit

父组件通过props的方式向子组件传递数据，而通过$emit 子组件可以向父组件通信。

1. 父组件向子组件传值

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

// section父组件

import comArticle from './test/article.vue'

export default {

name: 'HelloWorld',

components: { comArticle },

data() {

return {

articleList: ['红楼梦', '西游记', '三国演义']

}

}

}

复制代码

// 子组件 article.vue

{ {item}}

export default {

props: ['articles']

}

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

2. 子组件向父组件传值

对于$emit 我自己的理解是这样的: $emit绑定一个自定义事件, 当这个语句被执行时, 就会将参数arg传递给父组件,父组件通过v-on监听并接收参数。 通过一个例子，说明子组件如何向父组件传递数据。 在上个例子的基础上, 点击页面渲染出来的ariticle的item, 父组件中显示在数组中的下标

// 父组件中

{ {currentIndex}}

import comArticle from './test/article.vue'

export default {

name: 'HelloWorld',

components: { comArticle },

data() {

return {

currentIndex: -1,

articleList: ['红楼梦', '西游记', '三国演义']

}

},

methods: {

onEmitIndex(idx) {

this.currentIndex = idx

}

}

}

{ {item}}

export default {

props: ['articles'],

methods: {

emitIndex(index) {

this.$emit('onEmitIndex', index)

}

}

}

二、 $children / $parent

使用方法

// 父组件中

{ {msg}}

点击改变子组件值

import ComA from './test/comA.vue'

export default {

name: 'HelloWorld',

components: { ComA },

data() {

return {

msg: 'Welcom