轻松理解 Vue 组件传值：父传子、子传父、兄弟传参

2023-12-18 02:19:35

一、父传子：从父组件传递数据到子组件

父传子是最常见的一种 Vue 组件传值方式。在这种方式中，父组件通过 props 向子组件传递数据。子组件可以使用 props 接收父组件传递的数据，并在组件内部使用这些数据。

1. 父组件传递数据

<template>
  <div>
    <child-component :data="data" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: '父组件数据'
    }
  }
}
</script>

在上面的代码中，父组件通过 :data="data" 将 data 变量的数据传递给子组件。

2. 子组件接收数据

<template>
  <div>
    {{ data }}
  </div>
</template>

<script>
export default {
  props: ['data']
}
</script>

在上面的代码中，子组件通过 props: ['data'] 接收父组件传递的数据。

二、子传父：从子组件传递数据到父组件

子传父是一种允许子组件向父组件传递数据的方式。这种方式可以通过事件来实现。当子组件触发一个事件时，父组件可以监听这个事件并做出相应的处理。

1. 子组件触发事件

<template>
  <div>
    <button @click="emitData">子组件按钮</button>
  </div>
</template>

<script>
export default {
  methods: {
    emitData() {
      this.$emit('data', '子组件数据')
    }
  }
}
</script>

在上面的代码中，子组件通过 this.$emit('data', '子组件数据') 触发了一个名为 data 的事件，并将 子组件数据 作为参数传递给父组件。

2. 父组件监听事件

<template>
  <div>
    <child-component @data="handleData" />
  </div>
</template>

<script>
export default {
  methods: {
    handleData(data) {
      console.log(data) // 子组件数据
    }
  }
}
</script>

在上面的代码中，父组件通过 @data="handleData" 监听了子组件触发的 data 事件。当子组件触发这个事件时，父组件的 handleData 方法就会被调用，并且可以处理子组件传递的数据。

三、兄弟传参：在兄弟组件之间传递数据

兄弟传参是允许兄弟组件之间传递数据的一种方式。这种方式可以通过自定义事件来实现。当一个兄弟组件触发一个自定义事件时，另一个兄弟组件可以监听这个事件并做出相应的处理。

1. 兄弟组件触发自定义事件

<template>
  <div>
    <button @click="emitData">兄弟组件按钮</button>
  </div>
</template>

<script>
export default {
  methods: {
    emitData() {
      this.$emit('data', '兄弟组件数据')
    }
  }
}
</script>

在上面的代码中，兄弟组件通过 this.$emit('data', '兄弟组件数据') 触发了一个名为 data 的自定义事件，并将 兄弟组件数据 作为参数传递给另一个兄弟组件。

2. 兄弟组件监听自定义事件

<template>
  <div>
    <brother-component @data="handleData" />
  </div>
</template>

<script>
export default {
  methods: {
    handleData(data) {
      console.log(data) // 兄弟组件数据
    }
  }
}
</script>