突破迷局，领悟Vue组件传值的奥秘（上）

2024-01-27 02:42:41

前言

在Vue的组件化开发中，组件之间的通信和数据传递是至关重要的。组件传值是指在父组件和子组件之间传递数据的一种机制，它允许父组件将数据传递给子组件，或者子组件将数据传递给父组件。

父传子：props

props是Vue组件传值中最常用的方法之一，它允许父组件将数据传递给子组件。props的用法非常简单，在父组件中，需要使用props属性来定义需要传递给子组件的数据，然后在子组件中，使用props来接收父组件传递过来的数据。

<!-- 父组件 -->
<template>
  <ChildComponent :message="message" />
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <p>{{ message }}</p>
</template>

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

在上面的例子中，父组件通过props属性将message数据传递给子组件，子组件通过props接收message数据并将其显示在页面上。

子传父：$emit

emit是Vue组件传值的另一种常用方法，它允许子组件将数据传递给父组件。emit的用法也非常简单，在子组件中，需要使用$emit方法来触发一个自定义事件，然后在父组件中，使用该自定义事件来接收子组件传递过来的数据。

<!-- 子组件 -->
<template>
  <button @click="handleClick">Send message</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('message', 'Hello, Vue!')
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <ChildComponent @message="handleMessage" />
</template>

<script>
export default {
  methods: {
    handleMessage(message) {
      console.log(message) // 输出: Hello, Vue!
    }
  }
}
</script>