当前位置:首页 > 技术文章 > 正文内容

Vue3 如何实现父子组件传值?(vue父子组件传值props)

在Vue 3中,要实现父子组件传值效果主要通过props和emit两种机制来实现,下面我们就来详细介绍一下这两种机制。

父组件向子组件传值props

props是Vue组件的一种机制,主要的作用就是实现从父组件向子组件传递数据值,在父组件上通过在子组件标签上定义属性来实现数据属性值的传递,在子组件中通过props选项来接收这些数据。如下所示。

首先先来定义一个子组件,并且在子组件中定义好通过props接收的父组件的传值,如下所示。

// 子组件 (ChildComponent.vue)
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

在父组件的模板中,我们可以通过在子组件标签上使用属性绑定来传递数据。

<ChildComponent :message="parentMessage" />

这里我们定义的parentMessage属性就是在父组件中定义的数据属性。然后再子组件中可以通过props接收父组件传递的数据,如下所示。

export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}

通过这种方式,message就成了子组件的一个属性值,就可以在子组件中直接使用这个数据属性值来进行数据的获取操作。

子组件向父组件传值emit

Vue中提供的事件机制允许了子组件可以通过触发触发事件 (emit) 将数据传递到父组件的操作。我们可以在父组件中监听这些事件变化并且处理传递的数据。如下所示。

首先我们先来定义一个需要给父组件传值的子组件,内容如下所示。

// 子组件 (ChildComponent.vue)
<template>
  <div>
    <button @click="sendMessage">Send Message to Parent</button>
  </div>
</template>

<script>
export default {
  emits: ['send-message'],
  methods: {
    sendMessage() {
      this.$emit('send-message', 'Hello from Child');
    }
  }
}
</script>

在子组件中,通过 this.$emit 触发一个事件并传递数据。

this.$emit('send-message', 'Hello from Child');

这里,send-message 是事件的名称,'Hello from Child' 是传递的数据。

接下来,我们就可以在在父组件的模板中,通过 v-on 指令或简写 @ 来监听子组件触发的事件,如下所示。

<ChildComponent @send-message="receiveMessage" />

这里,receiveMessage是父组件中的一个方法,通过这个方法可以接收到通过子组件传递过来的数据值,在后续的操作中来使用这些值。

export default {
  methods: {
    receiveMessage(message) {
      console.log(message); // Output: Hello from Child
    }
  }
}

完整的示例代码

父组件代码内容,如下所示。

<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent :message="parentMessage" @send-message="receiveMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent'
    }
  },
  methods: {
    receiveMessage(message) {
      console.log(message); // Output: Hello from Child
    }
  }
}
</script>

子组件代码内容

<template>
  <div>
    <h2>Child Component</h2>
    <p>{{ message }}</p>
    <button @click="sendMessage">Send Message to Parent</button>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  emits: ['send-message'],
  methods: {
    sendMessage() {
      this.$emit('send-message', 'Hello from Child');
    }
  }
}
</script>

通过这种方式,我们就可以实现Vue3的父子组件之间的传值操作,确保数据在组件树中流动,从而实现复杂的交互逻辑。

相关文章

2024年10 大 Linux 桌面发行版推荐

年已过半,现在是探究 2024 年最流行的 Linux 发行版的最佳时机。Linux 是一个开源操作系统,构建在 Linux 内核上,并集成了 GNU shell 实用程序、桌面环境、应用程序、包管理...

Vue3开发极简入门(15.1):emits补完-结合v-model

之前代码是通过按钮触发emit,如果希望输入框里的内容在输入之后也能同步到父组件,就可以结合v-model的update事件来操作,具体如下。Son2.vue:<template>...

Vue状态管理:Pinia完整指南(状态管理vuex)

概述本文专注于Vue的状态管理。我们将深入探讨如何使用Pinia来管理Vue应用程序的状态。状态管理使用props和emit进行父子组件间的数据协作虽然方便,但在以下情况下可能不够充分,数据传递往往会...

学习ES6- 入门Vue(大量源代码及笔记,带你起飞)

ES6学习网站: https://es6.ruanyifeng.com/箭头函数普通函数//普通函数 this 指向调用时所在的对象(可变) let fn = function fn(a, b) {...

前端React面试基础系列(React基础篇)

本文阅读8分钟,喜欢的小伙伴可以持续关系小编哦1. 什么是受控组件和非受控组件?受控组件像表单元素在用户输入时,像<input> <select>等元素需要绑定一个 chang...