vue 组件之间的数据传递
父组件传数据给子组件
- 创建数据
- 获取json数据
子组件传数据给父组件
1. 子组件使用$emit监听数据
getAreaValues(){
this.$emit('getAreaValues', {
provId: this.provModel,
cityId: this.cityModel,
districtId : this.districtModel
})
}
2. 在父组件接收,在组件标签使用v-on绑定子组件的同名事件 “getAreaValues”
<template>
<div class="index">
<area-select v-on:getAreaValues="getValue"></area-select>
</div> </template> <script>
import areaSelect from './public/selects/areaSelect'
export default {
components: {
areaSelect
},
methods: {
getValue(areaValues){
console.log(areaValues); //组件的返回值
}
}
}
</script>
同级组件之间传数据
vue 组件之间的数据传递的更多相关文章
- Vue 爬坑之路(二)—— 组件之间的数据传递
Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...
- Vue基础知识之组件及组件之间的数据传递(五)
vue中的组件是自定的标签,可以扩展的原生html元素,封装可复用的代码 note: 1.在标签命中不要使用大写,标签名字必须用短横线隔开 2.模板中只能有一个根元素,不能使用并列标签. 定义组件 全 ...
- 解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function
Vue的项目中,如果项目简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递 但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要 ...
- Vue之组件之间的数据传递
Vue的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据,必须使用特定的方法才能实现组件之间的数据传递. 下列为在vue-cli创建项目中的操作 一·父组件向子组件传递数据 在Vue中 ...
- 【整理】解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function
解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function https://www.cnblogs.com/jaso ...
- (转)Vue 爬坑之路(二)—— 组件之间的数据传递
Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...
- React中父组件与子组件之间的数据传递和标准化的思考
React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...
- Angular06 组件、模块、父子组件之间的数据传递
1 创建组件 进入到angular项目的根目录,执行如下命令 ng g component test-component 注意:执行完上述命令后在angular项目的src/app文件夹下就会多出一个 ...
- Vue组件注册与数据传递
父子组件创建流程 1.构建父子组件 1.1 全局注册 (1)构建注册子组件 //构建子组件child var child = Vue.extend({ template: '<div>这是 ...
随机推荐
- TextView等组件的LayoutParams不能随便用,不然组件不显示
TableLayout.LayoutParams lpRow = new TableLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTEN ...
- android 网站上下的 adt 不能显示没有安装的
问题描述 使用SDK Manager更新时出现问题Failed to fetch URL https://dl-ssl.google.com/android/repository/repository ...
- 解决启动nginx时报80端口被占用的问题
如何解决启动nginx时报80端口被占用 最近公司的的一个服务器上需要部署多个项目,但80端口只有一个,所有只有使用Nginx来代理,当访问域名时就可以自动 转到IP:端口号,而不需要在域名后面加端口 ...
- 2018.09.10 bzoj1855: [Scoi2010]股票交易(单调队列优化dp)
传送门 单调队列优化dp好题. 有一个很明显的状态设置是f[i][j]表示前i天完剩下了j分股票的最优值. 显然f[i][j]可以从f[i-w-1][k]转移过来. 方程很好推啊. 对于j<kj ...
- 48 Fixing relationship Problems with Humor 用幽默解决人际关系问题
48 Fixing relationship Problems with Humor 用幽默解决人际关系问题 ①We've all heard that laughter is the best me ...
- Django入门与实践-第12章:复用模板(完结)
http://127.0.0.1:8000/http://127.0.0.1:8000/boards/1/http://127.0.0.1:8000/boards/2/http://127.0.0.1 ...
- [docker]mesos集群的启动脚本
宿主机的IP地址列表 mesos-lb:192.168.253.159 mesos-marathon:192.168.253.159 mesos-master:192.168.253.159 meso ...
- AWS S3 CLI的安装和配置
以Ubuntu系统为例,说明如何使用CLI调试AWS S3环境: 1. 安装 # sudo pip install awscli 2. 配置AWS CLI 执行命令aws configure, 注意, ...
- CreateDialog()与CreateDialogIndrect()
CreateDialog() 概述 函数功能:CreateDialog宏从一个对话框模板资源创建一个无模式的对话框,CreateDiaog宏使用CreateDialogParam函数. 函数原型:HW ...
- OpenGL模型视图变换、投影变换、视口变换的理解
OpenGL中不设置模型,投影,视口,所绘制的几何图形的坐标只能是-1到1(X轴向右,Y轴向上,Z轴垂直屏幕向外). 产生目标场景的过程类似于用照相机进行拍照: (1)把照相机固定在三角架上,并让他对 ...