父组件传数据给子组件

  1. 创建数据
  2. 获取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 组件之间的数据传递的更多相关文章

  1. Vue 爬坑之路(二)—— 组件之间的数据传递

    Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...

  2. Vue基础知识之组件及组件之间的数据传递(五)

    vue中的组件是自定的标签,可以扩展的原生html元素,封装可复用的代码 note: 1.在标签命中不要使用大写,标签名字必须用短横线隔开 2.模板中只能有一个根元素,不能使用并列标签. 定义组件 全 ...

  3. 解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function

    Vue的项目中,如果项目简单, 父子组件之间的数据传递可以使用  props 或者 $emit 等方式 进行传递 但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要 ...

  4. Vue之组件之间的数据传递

    Vue的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据,必须使用特定的方法才能实现组件之间的数据传递. 下列为在vue-cli创建项目中的操作 一·父组件向子组件传递数据 在Vue中 ...

  5. 【整理】解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function

    解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function https://www.cnblogs.com/jaso ...

  6. (转)Vue 爬坑之路(二)—— 组件之间的数据传递

    Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...

  7. React中父组件与子组件之间的数据传递和标准化的思考

    React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...

  8. Angular06 组件、模块、父子组件之间的数据传递

    1 创建组件 进入到angular项目的根目录,执行如下命令 ng g component test-component 注意:执行完上述命令后在angular项目的src/app文件夹下就会多出一个 ...

  9. Vue组件注册与数据传递

    父子组件创建流程 1.构建父子组件 1.1 全局注册 (1)构建注册子组件 //构建子组件child var child = Vue.extend({ template: '<div>这是 ...

随机推荐

  1. pyspider示例代码七:自动登陆并获得PDF文件下载地址

    自动登陆并获得PDF文件下载地址 #!/usr/bin/env python # -*- encoding: utf- -*- # Created on -- :: # Project: pdf_sp ...

  2. Django入门与实践-第11章:URL 分发(完结)

    http://127.0.0.1:8000http://127.0.0.1:8000/boards/1/http://127.0.0.1:8000/boards/2/http://127.0.0.1: ...

  3. SPI通信协议(SPI总线)学习

    1.什么是SPI? SPI是串行外设接口(Serial Peripheral Interface)的缩写.是 Motorola 公司推出的一 种同步串行接口技术,是一种高速的,全双工,同步的通信总线. ...

  4. NATAPP打穿内网

    前一篇博文写了ngrok作为内网穿透工具现在开始开始学习另外一种内 网穿透natapp(他也是基于ngrok的一种高速内网穿透服务)多的介绍就 不说了,开始进入正题. 第一步:先登录natapp官网( ...

  5. day3之文件操作

    一,文件操作基本流程. # 1.打开文件,产生文件句柄 # 2.操作文件句柄 # 3.关闭文件句柄 # f1 = open('11.txt',encoding='utf-8', mode='r') # ...

  6. 第一部分 Mysql的基础

    一.登录: mysql -h localhost -u root -p #其中,-h表示后面跟着的是服务器主机地址,-u后面跟着的是用户名,-p表示密码# 本地测试: 账号: 二.也可以省略写成: m ...

  7. html5.css3新特性

    块: article section, Nav aside header footer  内容分组 future fig caption main 文本级别标签   time i b  em  str ...

  8. OpenGL + MFC

    OpenGL超级宝典(中文版) 2001年 本书是一本完整而详尽的关于OpenGL的参考书,全书分为四部分:第一部分“OpenGL导言”介绍3D图形学的基本原理,读者将在此学会构造使用OpenGL的程 ...

  9. hdu 1348 凸包模板

    http://acm.hdu.edu.cn/showproblem.php?pid=1348 造城墙问题,求出凸包加上一圈圆的周长即可 凸包模板题 #include <cstdio> #i ...

  10. Spring Boot 2 实践记录之 组合注解原理

    Spring 的组合注解功能,网上有很多文章介绍,不过都是介绍其使用方法,鲜有其原理解析. 组合注解并非 Java 的原生能力.就是说,想通过用「注解A」来注解「注解B」,再用「注解B」 来注解 C( ...