父组件传数据给子组件

  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. centos6.5 设置ssh无密码登录

    :关闭防火墙 vim /etc/selinux/config 把SELINUX=enforcing修改为SELINUX=disabled   A机器root连接B机器root用户 (root用户登录) ...

  2. KOBAS

    1. What is KOBAS 3.0? KOBAS (KEGG Orthology Based Annotation System) is a web server for gene/protei ...

  3. 06 数据库入门学习-视图、sql注入、事务、存储过程

    一.视图 1.什么是视图 视图本质是一张虚拟的表 2.为什么要用 为了原表的安全 只要有两大功能 1.隐藏部分数据,开放指定数据 2.视图可以将查询结果保存,减少sql语句的次数 特点: 1.视图使用 ...

  4. 2018.09.25 codeforces1053E. Euler tour(并查集+st表+模拟)

    传送门 毒瘤细节题. 首先考虑不合法的情况. 先把相同的值配对,这样就构成了一些区间. 那么如果这些区间有相交的话,就不合法了. 如何判断?DZYO安利了一波st表,我觉得很不错. 接着考虑两个相同的 ...

  5. asp.net web api 安装swagger

    使用nuget控制台, 输入 Install-Package Swashbuckle,回车,等待安装引用.nuget国内没有镜像,安装比较慢 安装成功后会多出一个引用 右键工程点--属性,左边导航栏选 ...

  6. 打包python为可执行文件时报错R6034解决方案

    R6034 指的是:”An application has made an attempt to load the C runtime library incorrectly. Please cont ...

  7. centos7安装 docker

    centos7安装 docker 切换到 root用户,执行: [root@localhost frinder]# yum install docker已加载插件:fastestmirror, lan ...

  8. (线段树模板)A Simple Problem with Integers --POJ--3468

    链接: http://poj.org/problem?id=3468 代码: #include<stdio.h> #include<algorithm> #include< ...

  9. (线段树 区间查询更新) Can you answer these queries? -- hdu--4027

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=4027 分析:因为这个操作是把一个数变成平方根,所以显得略棘手,不过如果仔细演算的话会发现一个2^64数的 ...

  10. hdu 1505,1506

    1506题目 1505题目 1506: #include<stdio.h> #include<string.h> #include<iostream> using ...