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

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的父子组件之间的传值操作,确保数据在组件树中流动,从而实现复杂的交互逻辑。

相关文章

垃圾收费管理系统(垃圾收运管理系统)

今天来了解《#垃圾收费管理系统》,它包括如下功能:收费单位表格界面,类别表格界面,类别设置信息窗口,单位信息表格界面,单位信息信息窗口,缴费登记信息窗口,缴费登记表格界面,缴费登记的缴费单.1,到期提...

2020年最漂亮的7个Linux发行版(最受欢迎的linux发行版)

请关注本头条号,每天坚持更新原创干货技术文章。如需学习视频,请在微信搜索公众号“智传网优”直接开始自助视频学习1. 前言对于想学习Linux的朋友们,心中一定有疑问,哪个Linux版本比较好入门,Li...

据说是可以替代 Windows 的 5个 Linux 发行版

现如今有数以千计的 Linux 发行版可供您使用,然而人们却无法选择一个完美的操作系统来替代 Windows。 使用 Windows 时,傻瓜都能操作自如,同样的方法却不适用于 Linux。在这里,您...

「图解」父子组件通过 props 进行数据交互的方法

1.组件化开发,经常有这样的一个场景,就是父组件通过 Ajax 获取数据,传递给子组件,如何通过 props 进行数据交互来实现,便是本图解的重点。2.代码的结构3.具体代码 ①在父组件 data 中...

Vue3 中,父子组件如何传递参数?(vue父子组件传递数据方法)

在 Vue3 中,组件化开发是非常重要的特征,那么组件之间传值就是开发中常见的需求了。组件之间的传值三种方式:父传子、子传父、非父子组件传值。一、父传子( defineProps )父组件主要通过使用...

Vue3开发极简入门(16):祖孙组件间通信之provide&amp;inject

前文说了Vue的组件间关系,有父子、爷孙、其他关系。例如之前的Father、Son是父子关系,App与Son就是爷孙关系。而props的Son,与emits的Son,就是其他关系。前文的props是父...