父组件传数据给子组件

  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. 百度 ueditor 1.2.0 注意事项 ,上传文件问题

    <script type="text/javascript" src="script/ueditor/ueditor.config.js" charset ...

  2. centos_x64 6.4 安装jdk1.7

    1.行到user目录下新建一个java目录 #cd /usr #mkdir java #cd /usr/java/ 2.下载jdk 先从oracle找到要下载的jdk地址然后 wget http:// ...

  3. Mybatis传值为空需要配置JdbcType来解决吗?(XML文件不需要配置JdbcType)

    1,解决思路,配置自定义的语言驱动,重写自己的Paramethander package cn.com.servyou.gxdqy.tool.xmlhelper; import org.apache. ...

  4. 2018.07.04 BZOJ1336&&1337: Balkan2002Alien最小圆覆盖

    1336: [Balkan2002]Alien最小圆覆盖 1337: 最小圆覆盖 Time Limit: 1 Sec Memory Limit: 162 MBSec Special Judge Des ...

  5. MySQL 的IFNULL()、ISNULL()和NULLIF()函数

    参考与http://blog.csdn.net/xingyu0806/article/details/52080962 IFNULL(expr1,expr2) 假如expr1不为NULL,则 IFNU ...

  6. qmake -简介

    qmake 简化了在不同平台下开发项目时构建处理的过程. qmake 自动产生Makefiles文件,只需要几行信息来构建每个Makefile.qmake可以被用于任何软件项目,不管是否使用Qt. q ...

  7. Java设计模式 -- 简单工厂模式(SimpleFactory)

    一.什么是简单工厂模式 简单工厂模式属于类的创建型模式,又叫做静态工厂方法模式.通过专门定义一个类来负责创建其他类的实例,被创建的实例通常都具有共同的父类. 二.模式中包含的角色及其职责 1.工厂(C ...

  8. Android类装载器DexClassLoader的简单使用-----制作android插件的前奏

    声明:此篇文章借鉴<android内核剖析>整理得来. 一.装载器简介 “类装载器”(ClassLoader),顾名思义,就是用来动态装载class文件的.标准的Java SDK中有个Cl ...

  9. 无限存储之胖文本数据库TTD(Thick Text Database)

    无限存储之胖文本数据库TTD(Thick Text Database) 阅读:  评论:  作者:Rybby  日期:  来源:rybby.com 所谓的“胖”就是多.大.丰富的意思,像我们平时看到的 ...

  10. Linux服务器目录空间不足解决措施

      一般情况下工作环境中我们的服务或数据库文件都会存储在一个单独挂载的分区中,一般占空间比较大的大多就是服务的运行日志以及数据库文件,当我们分区的可用空间不足时就需要我们对分区进行扩容,或者找其它方法 ...