vue单页开发父子组件传值思路详解
作者:小雷雷哥哥 发布时间:2024-04-28 10:54:15
标签:vue,父子,组件,传值
vue单页开发时经常需要父子组件之间传值,自己用过但是不是很熟练,这里我抽空整理了一下思路,写写自己的总结。
GitHub地址:https://github.com/leileibrother/wechat-vue
文件目录如下图,example.vue是父组件,exampleChild.vue是子组件。
父组件引入子组件,父组件html的代码如下:
<template>
<div>
<h3>这是父组件</h3>
<p style="margin: 20px 0;text-align: center;">
<span>子组件传过来的值是 “{{childValue}}”</span>
</p>
<example-child v-bind:message="parentMsg" @getChildValue="getValue"></example-child>
</div>
</template>
<script>
import exampleChild from './examplechild.vue';
export default {
name: "example.vue",
components: {
exampleChild
},
data(){
return {
parentMsg:'hello',
childValue:''
}
},
mounted(){
},
methods: {
getValue:function (val) {
this.childValue = val;
}
}
}
</script>
<style scoped>
</style>
子组件代码如下:
<template>
<div>
<p style="margin: 20px 0;text-align: center;">我是子组件,父组件穿传过来的值是{{message}}</p>
<p style="margin: 20px 0;text-align: center;">
<button @click="send">点击向父组件传值</button>
</p>
</div>
</template>
<script>
export default {
name: "exampleChild.vue",
props:['message'],
data(){
return {
}
},
mounted(){
},
methods: {
send:function () {
this.$emit('getChildValue','你好父组件!')
}
}
}
</script>
<style scoped>
</style>
1,父组件向子组件传值。
在父组件中使用v-bind来绑定数据传给子组件,如我写的v-bind:message="parentMsg",把message字段传给子组件,
在子组件中使用props接收值,如props:['message']
,接收父组件传过来的message字段,使用{{message}}
就是可以使用父组件传过来的值了。
2,子组件向父组件传值。
子向父传值需要一个“中转站”,如我写的getChildValue,命名随便写。
在子组件中使用$emit()
来向父组件传值。第一个参数就是这个“中转站”,后面的参数是要传的值,可以是多个。
在父组件中如下,也需要这个中转站来接收值
getValue是接收子组件值的函数,参数val就是子组件传过来的值,这样就可以接收到子组件传过来的值了。
总结
以上所述是小编给大家介绍的vue单页开发父子组件传值思路详解网站的支持!
来源:https://blog.csdn.net/leileibrother/article/details/80346193
0
投稿
猜你喜欢
- php数组中元素的存在方式是以键值对的方式('key'=>'value'),有时候我们需要根据键删除数
- 日常小程序经常需要分页查询的功能,本篇我们讲解一下低代码中如何实现分页查询的功能。要自己开发分页功能,可以先参考官方的方法分页查询我们一般是
- 本文实例讲述了layui实现显示数据表格、搜索和修改功能。分享给大家供大家参考,具体如下:<div style="text-
- 1-错误详情cmd下运行net start mysql启动MySQL服务:提示发生系统错误5。拒绝访问。cmd管理员模式运行可以启动MySQ
- 树形目录显示程序问题描述:在我们项目中常常会出现自关联的数据表,如果我们从整体看去,整个表就呈现为一个树形数据结构(对于复杂的情况,它可能变
- 下文分步骤给大家介绍的非常详细,具体详情请看下文吧。一、准备用两台服务器做测试:Master Server: 192.0.0.1/Linux
- 一、简介Imageio是一个Python库,提供了一个简单的界面来读取和写入各种图像数据,包括动画图像,视频,体积数据和科学格式。它是跨平台
- 先写一个批处理文件,给个例子。 代码如下:set rq=%date:~0,10% exp system/system的
- 一、题目内容给定一个非负整数 num。对于 0 ≤ i ≤ num 范围中的每个数字 i ,计算其二进制数中的
- python的pdb调试命令的命令整理及实例一、命令整理pdb调试命令完整命令简写命令描述argsa打印当前函数的参数breakb设置断点c
- 1.常用数据结构之列表我们先给大家一个编程任务,将一颗色子掷6000次,统计每个点数出现的次数。这个任务对大家来说应该是非常简单的,我们可以
- 一、前提解决ES5中只有全局作用域和函数作用域,没有块级作用域而带来的不合理的场景。let基本用法用法和var 一样,只是let声明的变量只
- 因为mounted函数只会在html和模板渲染之后会加载一次,但是在子组件中只有第一次的数据显示是正常的,所以需要再增加一个updated函
- 1. 直接打印错误try:# your codeexcept KeyboardInterrupt:print("quit"
- 先看看单条 SQL 语句的分页 SQL 吧。 方法1: 适用于 SQL Server 2000/2005 SELECT TOP 页大小 *
- 线程池线程池的创建 - concurrentconcurrent 是 Python 的内置包,使用它可以帮助我们完成创建线程池的任
- 很多文章都有提到关于使用phpExcel实现Excel数据的导入导出,大部分文章都差不多,或者就是转载的,都会出现一些问题,下面是本人研究p
- 之前也写过这个小组件,最近遇到select下加搜索的功能,所以稍微完善一下。效果图:子组件 dropdown.vue<template
- 前言:目前我们使用的绝大多数计算机程序,无论是办公软件,浏览器,甚至游戏、视频都是通过菜单界面系统配置的,它几乎成了我们使用机器的默认方式。
- 打开VS2013 —> 工具 —> 选项 —> 环境 —> 字体和颜色 —> 纯文本(显示项中) —>