Vue组件父子间值传递，该怎么处理？

前端

2023-10-11 22:45:44

Vue组件父子间值传递，该怎么处理？

前言

吃饱饭才有力气写代码~

今天再来理一理Vue组件中父子组件之间相互传值的逻辑，理解上其实很简单，但是像我们这样的初学者实际使用时可能还是会遇到一些坑，本文将针对Vue组件父子间值传递的方法和技巧进行详细的讲解，希望对您有所帮助。

理解组件通信

在Vue中，组件是构建应用程序的基本单元，组件之间需要相互通信才能实现数据的传递和功能的协作。父子组件通信是指父组件向子组件传递数据，子组件向父组件传递数据。

父组件向子组件传递数据

props

props是父组件向子组件传递数据的常用方式。props是子组件的属性，父组件可以通过在子组件的template中使用props来访问子组件的属性。

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

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

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

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

在上面的例子中，父组件通过message属性向子组件传递数据，子组件通过props接收数据并显示在模板中。

$emit

$emit是子组件向父组件传递数据的常用方式。$emit方法允许子组件触发父组件定义的事件，父组件可以通过监听这些事件来接收子组件传递的数据。

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

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

<!-- 父组件 -->
<template>
  <child-component @sendData="handleData"></child-component>
</template>

<script>
export default {
  methods: {
    handleData(data) {
      console.log(data) // 'Hello from child!'
    }
  }
}
</script>

在上面的例子中，子组件通过$emit方法触发sendData事件，并传递数据Hello from child!。父组件通过在模板中监听sendData事件来接收子组件传递的数据。

子组件向父组件传递数据

props

子组件也可以通过props向父组件传递数据。子组件可以通过在子组件的template中使用v-model指令来实现向父组件传递数据。

<!-- 子组件 -->
<template>
  <input v-model="message">
</template>

<script>
export default {
  props: ['message'],
  data() {
    return {
      message: ''
    }
  },
  watch: {
    message(newVal) {
      this.$emit('updateMessage', newVal)
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <child-component :message="message" @updateMessage="handleMessage"></child-component>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    handleMessage(data) {
      this.message = data
    }
  }
}
</script>

在上面的例子中，子组件通过v-model指令将输入框的值与子组件的message属性绑定在一起。当用户输入数据时，子组件的message属性会更新，并触发updateMessage事件，将数据传递给父组件。父组件通过监听updateMessage事件来接收子组件传递的数据。

$emit

子组件也可以通过$emit方法向父组件传递数据。子组件可以通过在子组件的template中使用@event指令来实现向父组件传递数据。

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

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

<!-- 父组件 -->
<template>
  <child-component @sendData="handleData"></child-component>
</template>

<script>
export default {
  methods: {
    handleData(data) {
      console.log(data) // 'Hello from child!'
    }
  }
}
</script>