VUE组件案例详解：传值秘籍

前端

2023-10-03 01:41:23

在 VUE 的组件化开发中，组件之间的传值是至关重要的。本文将通过一个具体的案例，手把手教你如何实现在组件之间的无缝数据传递。我们从概念入手，再到具体实操，循序渐进地为你讲解组件传值的奥秘。

理解组件传值的概念

在组件化开发中，父组件和子组件之间往往需要进行数据交互。我们把从父组件向子组件传递数据称为"Props"，而从子组件向父组件传递数据则称为"$emit"。

Props 的本质就是一个 JavaScript 对象，它包含了父组件希望传给子组件的数据。子组件可以通过 Props 访问这些数据，并将其用于渲染自己的模板。

$emit 的本质是一个自定义事件，它允许子组件向父组件触发事件，并传递数据。父组件可以通过监听这个自定义事件来接收数据。

Props 的使用

在父组件中，我们可以通过 Props 来传递数据给子组件。

<template>
  <child-component :title="title" :content="content" />
</template>

<script>
export default {
  data() {
    return {
      title: '这是标题',
      content: '这是内容'
    }
  }
}
</script>

在子组件中，我们可以通过 Props 来接收数据。

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  props: ['title', 'content']
}
</script>

通过这种方式，我们就完成了从父组件向子组件的传值。

$emit 的使用

在子组件中，我们可以通过 $emit 来向父组件触发事件，并传递数据。

<template>
  <div>
    <button @click="handleClick">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('button-click', '我被点击了')
    }
  }
}
</script>

在父组件中，我们可以通过监听这个自定义事件来接收数据。

<template>
  <child-component @button-click="handleClick" />
</template>

<script>
export default {
  methods: {
    handleClick(data) {
      console.log(data) // 输出：我被点击了
    }
  }
}
</script>