父组件传数据给子组件

  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. 创建一个子进程---vfork

    子.父进程共享数据段与堆栈段 函数原型:pid_t vfork(void) 返回值:子进程中返回0,父进程中返回子进程ID,出错返回-1. 注意: vfork创建的进程是按先子进程后父进程的顺序执行的 ...

  2. 100 floors 2 eggs

    https://github.com/Premiumlab/Python-for-Algorithms--Data-Structures--and-Interviews/blob/master/Moc ...

  3. 2018.07.23 hdu5828 Rikka with Sequence(线段树)

    传送门 这道题维护区间加,区间开根,区间求和. 线段树常规操作. 首先回忆两道简单得多的线段树. 第一个:区间覆盖,区间加,区间求和. 第二个:区间开根,区间求和. 这两个是名副其实的常规操作. 但这 ...

  4. 简单的Java,Python,C,C++

    Java 语言 //package main //注意不要添加包名称,否则会报错. import java.io.*; import java.util.*; cin.hasNext(); cin.h ...

  5. STL中的Vector相关用法

    STL中的Vector相关用法 标准库vector类型使用需要的头文件:#include <vector>. vector 是一个类模板,不是一种数据类型,vector<int> ...

  6. matlab 降维工具箱

    Matlab Toolbox for Dimensionality Reduction   降维方法包括: Principal Component Analysis (PCA) • Probabili ...

  7. 序列化Json时遇到的大小写问题及解决方法

    最近在一个webapi2项目中遇到了一个问题:C#编码规范中规定属性的首字母是大写的(大多数公司采用这种编码风格),但是从其它系统中接收到的json对象的属性却是小写的(大多数公司采用这种编码风格), ...

  8. [c# 20问] 4.Console应用获取执行路径

    一行代码可以搞定了~ static void GetAppPath() { string path = System.Reflection.Assembly.GetExecutingAssembly( ...

  9. 开源的前端web框架推荐

    B-JUI前端框架:http://demo.b-jui.com/ gentelella :https://colorlib.com/polygon/gentelella/ admui(收费):http ...

  10. LeetCode138:Copy List with Random Pointer

    题目: A linked list is given such that each node contains an additional random pointer which could poi ...