父组件传数据给子组件

  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. linq 使用or构建动态查询

    You can certainly do it within a Where clause (extension method). If you need to build a complex que ...

  2. 2018.10.18 bzoj1185: [HNOI2007]最小矩形覆盖(旋转卡壳)

    传送门 不难看出最后的矩形一定有一条边与凸包某条边重合. 因此先求出凸包,然后旋转卡壳求出当前最小矩形面积更新答案. 代码: #include<bits/stdc++.h> #define ...

  3. 2018.09.05 bzoj2726: [SDOI2012]任务安排(斜率优化dp+二分)

    传送门 跟Ti" role="presentation" style="position: relative;">TiTi为正数的时候差不多. ...

  4. 2018.08.29 NOIP模拟 pmatrix(线性筛)

    [问题描述] 根据哥德巴赫猜想(每个不小于 6 的偶数都可以表示为两个奇素数之和),定义 哥德巴赫矩阵 A 如下:对于正整数对(i,j),若 i+j 为偶数且 i,j 均为奇素数,则 Ai,j = 1 ...

  5. HDU 1847 Good Luck in CET-4 Everybody! (博弈)

    题意:不用说了吧,都是中文的. 析:虽说这是一个博弈的题,但是也很简单的,在说这个题目前我们先说一下巴什博弈定理. 巴什博弈定理:一堆物品有n个,有两个人(两个人足够聪明)轮流取,规定每次至少取一个, ...

  6. 20155236 2016-2017-2 《Java程序设计》第七周学习总结

    20155236 2016-2017-2 <Java程序设计>第七周学习总结 教材学习内容总结 Calendar是个抽象类,java.util.GregorianCalendar是其子类, ...

  7. 挂载Linux云主机硬盘到本地计算机

      现在移动硬盘已经是每个人的生活必需品了,当然网络也是我们生活的必需品,我们现在就是要用网络存储代替硬盘存储,当然再实际使用过程中需要考虑到以下两个问题: 网络延迟 云主机磁盘IO   以上两个关键 ...

  8. [翻译]NUnit---RequiresSTA and RequiresThread Attributes(十七)

    RequiresSTAAttribute (NUnit 2.5) RequiresSTA特性用于测试方法.类.程序集中指定测试应该在单线程中运行.如果父测试不在单线程中运行则会创建一个新的线程. No ...

  9. 设计模式之状态模式(State Pattern)

    一.什么是状态模式? 把所有动作都封装在状态对象中,状态持有者将行为委托给当前状态对象 也就是说,状态持有者(比如汽车,电视,ATM机都有多个状态)并不知道动作细节,状态持有者只关心自己当前所处的状态 ...

  10. ASP.Net C#---Excel导入导入后台方法

    https://www.cnblogs.com/chendaye/p/10693983.html  这里写了Excel的导入导入方法, 后台我用的是MVC 以及 C#语句用来在后台做接受和输出数据 / ...