【Vue】组件传值的六种方法

Vue 组件之间的通信大概归类为：

父子组件通信: props/ $e m i t ； r e f / r e f s ；$ attrs / $l i s t e n e r s ；$ parent / $c h i l d r e n 兄弟组件通信 : e v e n t B u s ； v u e x 跨级通信 : e v e n t B u s ； V u e x ；$ attrs / $l i s t e n e r s 一、 p r o p s /$ emit（父子组件通信）
1.父组件向子组件传值
通过 props 传值。
父组件的代码：

<template>
  <div class="section">
    <child :list="list"></child>
  </div>
</template>
<script>
import child from './child.vue'
export default {
   
  components: {
    child },
  data() {
   
    return {
   
      list: ['a1', 'b2', 'c3']
    }
  }
}
</script>

子组件的代码(即 child.vue)：

<template>
  <div>
    <span v-for="(item, index) in list" :key="index">{
   {
   item}}</span>
  </div>
</template>
<script>
export default {
   
  props: ['list'],
}
</script>

2.子组件向父组件传值
$emit 绑定一个自定义事件, 当这个语句被执行时, 就会将参数 arg 传递给父组件,父组件通过 v-on 监听并接收参数。

父组件的代码：

<template>
  <div class="section">
    <child :list="list"  @onEmitIndex="onEmitIndex"></child>
    <p>{
   {
   item}} => {
   {
   currentIndex}}</p

【Vue】组件传值的六种方法

悦读