首页 > 其他分享 >在 Vue 中,子组件如何向父组件传递数据?

在 Vue 中,子组件如何向父组件传递数据?

时间:2023-09-07 20:33:39浏览次数:35  
标签:Vue 自定义 receivedData 传递数据 组件 data 给父

在 Vue 中,子组件向父组件传递数据可以通过自定义事件来实现。

下面是一种常见的方法:

在子组件中,使用 $emit 方法触发一个自定义事件,并传递要传递给父组件的数据作为参数。

<template>
  <button @click="sendDataToParent">传递数据给父组件</button>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      const data = '这是子组件传递给父组件的数据';
      this.$emit('custom-event', data);
    }
  }
}
</script>

子组件中的 sendDataToParent 方法通过 $emit 触发了一个名为 'custom-event' 的自定义事件,并将数据 '这是子组件传递给父组件的数据' 作为参数传递给父组件。

在父组件中,使用 v-on 或简写的 @ 语法监听子组件触发的自定义事件,并在相应的处理函数中接收子组件传递的数据。

<template>
  <div>
    <child-component @custom-event="handleCustomEvent"></child-component>
    <div>{{ receivedData }}</div>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedData: ''
    };
  },
  methods: {
    handleCustomEvent(data) {
      this.receivedData = data;
    }
  }
}
</script>

父组件通过使用 @custom-event 监听子组件触发的自定义事件,并在 handleCustomEvent 方法中接收子组件传递的数据。

父组件将接收到的数据设置为 receivedData 属性,然后可以在模板中进行显示或进一步处理。

标签:Vue,自定义,receivedData,传递数据,组件,data,给父
From: https://blog.51cto.com/u_15315508/7401049

相关文章

  • 深度理解vue3中选项式语句和组合式语句的区别
    选项式语句和组合式语句是Vue3中的两种不同的编程风格,它们都是用于编写Vue组件的方法。在本文中,我将详细介绍选项式语句和组合式语句的概念、区别和使用场景。选项式语句是Vue3中最常用的编写组件的方式之一。它使用了Vue的选项对象,其中包含了组件的各种选项,如数据、计算......
  • vue-router 路由模式有几种?
    VueRouter提供了三种路由模式:######1:Hash模式(默认):在URL中使用带有#符号的哈希值来管理路由。例如:http://xxxx.com/#/path。在Hash模式下,当URL的哈希值发生变化时,浏览器不会向服务器发送请求,而是通过监听hashchange事件来进行路由导航。######2:History模式:使用HTM......
  • Vue简单浮动标签(simple floating labels)
    简介及使用教程Vue简单浮动标签(simplefloatinglabels)是一个基于Vue.js的简单浮动表单标签组件,支持自定义颜色、边框及错误信息。安装npmivue-simple-floating-labels使用引入组件importFloatingLabelfrom'vue-simple-floating-labels'exportdefault{......
  • Vue 拖拽组件(Draggable)
    简介及使用教程Vue拖拽组件(Draggable)是一个允许与View-Model同步进行拖放排序的Vue组件。这是基于Sortable.js并提供它的所有功能。特点完全支持Sortable.js特性:支持触摸设备支持拖动句柄和可选择的文本智能自动滚动支持在不同列表之间拖放,没有jQuery依赖项保持......
  • 滚动到底部的Vue指令插件
    简介及使用教程VueChatScroll是一个保持可滚动内容滚动到底部的Vue指令插件,用于Vue.js2,当在该元素中添加新内容时,滚动到该元素的底部。安装npmivue-chat-scroll使用importVuefrom'vue'importVueChatScrollfrom'vue-chat-scroll'Vue.use(VueChatScroll)......
  • Vue3实战06-CompositionAPI+<script setup>好在哪?
    Vue3的CompositionAPI+<scriptsetup>这种最新的代码组织方式。<scriptsetup>是啥?为啥尤大在微博强推?本文就使用CompositionAPI和<scriptsetup>重构第2讲的清单应用。重构过程将明白,CompositionAPI让我们更好组织代码结构,<scriptsetup>本质是更精简方式写Compositi......
  • vite + vue3 自动导入点击路由刷新问题记录
     exportdefaultdefineConfig(()=>{//这里只加入了element的有其他的也加在这里constoptimizeDepsElementPlusIncludes=['element-plus/es'];//预加载element样式有其他组件也是如此设置即可fs.readdirSync('node_modules/element-plus/es/components').......
  • Vue3实战06-CompositionAPI+<script setup>好在哪?
    Vue3的CompositionAPI+<scriptsetup>标签内定义的变量和函数,都可以在模板中直接使用。###1.2显示清单应用实现累加器后,回到src/pages/Home.vue组件,使用如下代码显示清单应用。直接importTodoList.vue组件,然后<scriptsetup>会自动把组件注册到当前组件,这样......
  • 2-Vue.js环境准备-使用vue-cli快速搭建项目(cli2)
    一、概述在用Vue.js构建大型应用时,推荐使用npm安装,npm能很好的和webpack等打包工具配合使用。如果使用npm过程中安装速度过慢,可以考虑使用淘宝镜像的cnpm来代替npm。首先Vue的安装依赖于Node.js,要保证你的计算机上已经安装过Node.js。可以参考前面的文章:https://blog.csdn.net/G......
  • vue中的nextTick的作用
    vue里面,常用的事件onMounted里,总喜欢用一个nextTick:onMounted(()=>{nextTick(()=>{init();});});这个东西有啥用呢?我总搞不懂。今天我忽然有点明白了。这是一个跟前面语句有关的方法。意思是,等前面的都执行完了,再执行nextTick里面的方法。比如说,页面上有一块内容,正......