文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

分享Vue组件传值的几种常用方式(二)

2024-04-02 19:55

关注

前言

大家好,在上一篇文章分享Vue组件传值的几种常用方式(一)中我们介绍了父组件向子组件传值的相关流程,今天我们主要来学习子组件如何向父组件传值。子向父传值涉及到的方法的核心是 “$.emit” , 我们将利用这一方法来实现既定目标。

子向父传值

子向父传值意思就是要把子组件里的值传递给父组件,方法在子组件的methods模块中利用$.emit,其内部我们再来定义一个事件名和所要传递的值。

目标:在子组件内的输入框中输入的值,会显示在父组件文本的相应区域

示例:

一 文件配置及模板生成

关于vue文件的格式上一篇文章中已经讲过,这里就不详细讲了,这里稍微讲一下文件的导入导出以及操作main.js文件等。

第一步,在Father组件和Son组件中快速生成模板,并将Son.vue导入进Father中完成注册,再使用Son组件的实例

<template>
  <div class="box2">
    <Son></Son>    
  </div>
</template>

<script>
import Son from '@/components/Son.vue'
export default {
  components: {
    Son,
  },
}
</script>

<style lang="less"></style>

第二步,完善main.js文件,因为编译器在这里解析文件是从main.js开始的

到此我们完成了文件的基本配置,下面我们就正式开始学习子向父传值

二 Son组件内部处理

首先我们在Son组件中的template模板中完善ul结构,我们需要在名为box的dix盒子内部创建一个输入框,然后为它绑定一个input事件,方法名为SonSend,里面传递一个参数,获取到我们在输入框中输入的值

既然我们在上文提到需要利用this.$emit来进行传值,那么接下来我们就在methods方法中定义一个名为SonSend的方法

注意此时参数e就是输入框中输入的值,我们需要把这个参数e传递给父组件中,而前面的 ‘Accept’ 字符串就是我们要传递给父组件并且在Son实例上定义的事件名,这里的this指向的是这个export default导出模块

三 Father组件内部处理

那在Father父组件中,我们需要在实例Son身上注册一个Accept事件,方法名设置成Result。接着我们要在父组件的导出模块中定义一个data数据,属性名为res,值为0,并且我们要在template中定义一个h1标签,在其内部创建一个插值表达式,用来显示我们是否已经正确的拿到子组件传递过来的值

date数据:

现在我们需要在父组件的methods中定义一个Result方法,内部接收一个val参数,这个参数就是子组件传递过来的数据。在函数体内,我们把val参数的值赋值给res,这样我们就完善了res值的更改条件

接着我们运行"npm run serve"来查看页面上的内容

这样一来我们就完成了子组件向父组件的值传递过程

总结

代码

Father.vue

<template>
  <div class="box2">
    <Son @Accept="Result"></Son>
    <h1>Father: 子组件传递过来的值是 ---{{ res }}</h1>
  </div>
</template>

<script>
import Son from '@/components/Son.vue'

export default {
  components: {
    Son,
  },

  data() {
    return {
      res: 0,
    }
  },

  methods: {
    Result(val) {
      this.res = val
      console.log(val)
    },
  },
}
</script>

<style lang="less"></style>

Son.vue

<template>
  <div class="box">
    Son:
    <input
      type="text"
      placeholder="请输入您想传递的值"
      @input="SonSend($event.target.value)"
    />
  </div>
</template>

<script>
export default {
  methods: {
    SonSend(e) {
      this.$emit('Accept', e)
      console.log(e)
    },
  },
}
</script>

<style lang="less"></style>

到此这篇关于分享Vue组件传值的几种常用方式(二)的文章就介绍到这了,更多相关Vue组件传值内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯