父组件传数据给子组件

  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. activemq.bat 在window7 x64下启动(安装)报错解决方案

    在启动  apache-activemq-5.15.2/activemq.bat  时候报错,提示以下信息: wrapper | --> Wrapper Started as Consolewr ...

  2. 2018.09.16 codeforces1041C. Coffee Break(双端队列)

    传送门 真心sb题啊. 考场上最开始看成了一道写过的原题... 仔细想了一会发现看错了. 其实就是一个sb队列. 每次插入到队首去就行了. 代码: #include<bits/stdc++.h& ...

  3. hdu-1058(动态规划)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1058 题意:求只由2,3,5,7的乘积组成的数,输出格式见output 思路:开始想打表,后来打表超时 ...

  4. 33. Pay Gap for the Brightest Female Graduatea 最聪明的大学女毕业生面临的工资差距

    33. Pay Gap for the Brightest Female Graduatea 最聪明的大学女毕业生面临的工资差距 ① When young women were found to ma ...

  5. arduino 与 android 通过TCP进行字节收发

    arduino #include <avr/wdt.h> #include <SoftwareSerial.h> #define FPIN 13 SoftwareSerial ...

  6. 理解指令的restrict属性(转)

    restrcit属性说明 restrict: EACM中的任意一个之母.它是用来限制指令的声明格式的. E - 元素名称:<my-directive></my-directive&g ...

  7. spring+hibernate 整合异常 Class 'org.apache.commons.dbcp.BasicDataSource' not found

    解决方法 添加 commons-dbcp.jar和commons-pool.jar包

  8. IntelliJ IDEA 2017版 spring-boot使用Spring Data JPA使用Repository<T, T>编程

    1.环境搭建pom.xml搭建 <?xml version="1.0" encoding="UTF-8"?> <project xmlns=& ...

  9. HDU 1087 Super Jumping! Jumping! Jumping! (DP+LIS)

    题意:给定一个长度为n的序列,让你求一个和最大递增序列. 析:一看,是不是很像LIS啊,这基本就是一样的,只不过改一下而已,d(i)表示前i个数中,最大的和并且是递增的, 如果 d(j) + a[i] ...

  10. [Android]高低API版本兼容之@TargetApi

    使用@TargetApi annotaion, 使高版本API的代码在低版本SDK不报错 例如: AsyncTask.THREAD_POOL_EXECUTOR, 这个静态变量是API11才有的, 设置 ...