//父组件
<template>
<div>
<div style="float: left">
<input-data :city="city"></input-data>
</div>
<div style="float: right">
<input-data :fonTer="fonTer"></input-data>
</div> </div>
</template> <script type="text/ecmascript-6">
import inputData from '../components/common/input'
export default{
data(){
return{
msg:'请输入',
city:['深圳','广州','上海','北京','香港'],
fonTer:['第一个爱人','第二个爱人','第三个爱你']
}
},
components:{
inputData
}
}
</script> <style> </style> //1.子组件:
<template>
<div>
<section>
<input type="text" value=""/>
<input type="buttom" value="查询"/>
</section>
<div>
<select-drop :city="city"></select-drop>
</div>
<div>
<select-drop :fonTer="fonTer"></select-drop>
</div>
</div>
</template> <script type="text/ecmascript-6">
import selectDrop from '../common/select';
export default{
data(){
return{}
},
components:{
selectDrop
},
props:['city','fonTer'],
created(){}
}
</script> <style> </style> //2.细分小组件: <template>
    
<div>
    <ul>
<li v-for="item in city">{{item}}</li>
<li v-for="item in fonTer">{{item}}</li>
</ul>
</div>
</template> <script type="text/ecmascript-6">
export default{
data(){
return{}
},
props:['city','fonTer'],
created(){ }
}
</script> <style> </style>


vue项目中多个组件之间传递数据的更多相关文章

  1. 【Vue项目笔记】—— 父子组件之间传递参数和子组件执行父组件中的方法

    父组件(MyBlog.vue) <template> <!-- Delete Modal --> <!-- 注意:这里的@deleteBlog中的deleteBlog要和 ...

  2. vue项目中的父子组件之间的传值。

    首先说一下父子组件就是在一个vue文件中引入另一个vue文件,被引入vue文件就是子组件,引入vue文件的vue文件就是父组件.而在父组件中是不能直接调用子组件中的变量值的.下面详细说一下,父子组件之 ...

  3. vue.js 组件之间传递数据

    前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关 ...

  4. 解决vue项目中遇到父组件的按钮或操作控制重新挂载子组件但是子组件却无效果的情况

    在vue项目中终会遇到需要父组件的按钮或操作控制重新挂载子组件的需求,我在新项目中就遇到这种需求.真实场景是父组件的早,中,晚三个按钮(代表三个时间段)来控制子组件的table表格列的动态加载. 子组 ...

  5. vue组件父子组件之间传递数据

    举个栗子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  6. vue项目中使用mockjs+axios模拟后台数据返回

    自己写练手项目的时候常常会遇到一个问题,没有后台接口,获取数据总是很麻烦,于是在网上找了下,发现一个挺好用的模拟后台接口数据的工具:mockjs.现在把自己在项目中使用的方法贴出来   先看下项目的目 ...

  7. WinForm 中两个窗口之间传递数据

    方法有很多种,这里介绍项目中使用的两种 一.通过委托+事件的方法进行传值 (点击Form2中的button1按钮,将会把Form2中的textbox.text 传给Form1中的 lable.text ...

  8. vue项目中使用mockjs模拟接口返回数据

    Mock.js 是一个模拟数据生成器,利用它,可以拦截ajax请求,直接模拟返回数据,这样前后端只要约定好数据格式,前端就不需要依赖后端的接口,可以直接使用模拟的数据了. 网上介绍mock的教程也较多 ...

  9. vue项目中使用地图组件

    一.引入高德地图 一般用使用vue-cli webpack最简单粗暴的引入地图api的方法就是,在入口index.html的头部直接引入,记得一定要带上key,如果没有的话去高德地图api的官网申请一 ...

随机推荐

  1. hive 基础

    Apache的顶级项目,(java) 2008年Facebook公司开源给Apache基金会 官网:http://hive.apache.org/ hive 将SQL转换成MapReduce程序,并将 ...

  2. JVM探秘5---JVM监控命令大全

    jps命令---查看JVM进程状况 格式为:jps [options] [hostid] 功能描述: jps是用于查看有权访问的hotspot虚拟机的进程. 当未指定hostid时,默认查看本机jvm ...

  3. 简单代码生成csv文件(excel)

    $arr = array('');// 目标数组 header("Content-Type:application/vnd.ms-excel;charset=gbk"); head ...

  4. 51Nod 1010 只包含因子2 3 5的数

    K的因子中只包含2 3 5.满足条件的前10个数是:2,3,4,5,6,8,9,10,12,15. 所有这样的K组成了一个序列S,现在给出一个数n,求S中 >= 给定数的最小的数. 例如:n = ...

  5. 对比PG数据库结构是否一致的方法

    如果版本升级涉及数据库更新,测试时要对比旧版数据库更新后是否和全新安装的是否一致,但是数据库结构很复杂的时候对比就很麻烦,postgre可以使用以下方法对比:pg_dump.exe –h 数据库IP ...

  6. java excel大数据量导入导出与优化

    package com.hundsun.ta.utils; import java.io.File; import java.io.FileOutputStream; import java.io.I ...

  7. 继上篇后的Excel批量数据导入

    上篇Excel动态生成模板,此篇将借用此模板进行Excel数据的批量导入. 说明:由于数据库中部分数据储存的是编码或者Id,因此,这里就需要用到上篇中的全局数据,判断是否有数据,有数据直接使用,没有数 ...

  8. linux 指令 备份

    lsb_release -a LSB是Linux Standard Base的缩写,lsb_release命令用来显示LSB和特定版本的相关信息.如果使用该命令时不带参数,则默认加上-v参数. -v, ...

  9. Python3 tkinter基础 Menu add_checkbutton 多选的下拉菜单

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  10. P5205 【模板】多项式开根

    思路 按如下式子计算即可 \[ B(x)=\frac{A(x)+B'^2(x)}{2B'(x)} \] 代码 // luogu-judger-enable-o2 #include <cstdio ...