vue项目中多个组件之间传递数据
//父组件
<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项目中多个组件之间传递数据的更多相关文章
- 【Vue项目笔记】—— 父子组件之间传递参数和子组件执行父组件中的方法
父组件(MyBlog.vue) <template> <!-- Delete Modal --> <!-- 注意:这里的@deleteBlog中的deleteBlog要和 ...
- vue项目中的父子组件之间的传值。
首先说一下父子组件就是在一个vue文件中引入另一个vue文件,被引入vue文件就是子组件,引入vue文件的vue文件就是父组件.而在父组件中是不能直接调用子组件中的变量值的.下面详细说一下,父子组件之 ...
- vue.js 组件之间传递数据
前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关 ...
- 解决vue项目中遇到父组件的按钮或操作控制重新挂载子组件但是子组件却无效果的情况
在vue项目中终会遇到需要父组件的按钮或操作控制重新挂载子组件的需求,我在新项目中就遇到这种需求.真实场景是父组件的早,中,晚三个按钮(代表三个时间段)来控制子组件的table表格列的动态加载. 子组 ...
- vue组件父子组件之间传递数据
举个栗子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- vue项目中使用mockjs+axios模拟后台数据返回
自己写练手项目的时候常常会遇到一个问题,没有后台接口,获取数据总是很麻烦,于是在网上找了下,发现一个挺好用的模拟后台接口数据的工具:mockjs.现在把自己在项目中使用的方法贴出来 先看下项目的目 ...
- WinForm 中两个窗口之间传递数据
方法有很多种,这里介绍项目中使用的两种 一.通过委托+事件的方法进行传值 (点击Form2中的button1按钮,将会把Form2中的textbox.text 传给Form1中的 lable.text ...
- vue项目中使用mockjs模拟接口返回数据
Mock.js 是一个模拟数据生成器,利用它,可以拦截ajax请求,直接模拟返回数据,这样前后端只要约定好数据格式,前端就不需要依赖后端的接口,可以直接使用模拟的数据了. 网上介绍mock的教程也较多 ...
- vue项目中使用地图组件
一.引入高德地图 一般用使用vue-cli webpack最简单粗暴的引入地图api的方法就是,在入口index.html的头部直接引入,记得一定要带上key,如果没有的话去高德地图api的官网申请一 ...
随机推荐
- 【UML】-NO.44.EBook.5.UML.1.004-【UML 大战需求分析】- 顺序图(Sequence Diagram)
1.0.0 Summary Tittle:[UML]-NO.44.EBook.1.UML.1.004-[UML 大战需求分析]- 顺序图(Sequence Diagram) Style:DesignP ...
- cocos中FPS数值的含义
在cocos2d-x 2.x ,大家都看到了左下角的FPS变成3行,多了两行数据. 1.最上面一行是指的当前场景的渲染批次.(简单理解为需要渲染多少个贴图出来) 2.中间一行是渲染每一帧需要的时间. ...
- Linux如何编写自启动shell脚本
1.需求分析 在很多情况下,程序员都做着重复枯燥的工作,虽然这些工作也是必须的,其实这些重复性的工作可以执行脚本替代:今天笔者就如何编写自启动shell脚本减少程序员开启服务器后的环境开启工作: 2. ...
- jQuery属性attr
设置多个属性/值对 为被选元素设置一个以上的属性和值. 语法 $(selector).attr({attribute:value, attribute:value ...})比如:$("im ...
- iOS项目之苹果审核被拒
解读: 3.2 其他业务模式问题下方列表并非详尽清单,并且您提交的 App 可能会导致我们的政策有所更改或更新,但这里有一些额外的应做事宜和勿做事宜需要您谨记在心: 可以接受 (i)在您的 App 中 ...
- Shell 文本处理命令
命令:cut –d’:’ -f1, 文件名 #切割处文件列的参数. -d切割字符. -f列的第几个参数. -c1-10指定字符串范围行的第一个到第十个. 命令:sort 文件名 #根据第一列第一个字符 ...
- Oracle 11gR2 用户重命名(rename user)
Oracle 11.2.0.2里新增了一个新特性——用户重命名(Rename User),在这个版本之前要想重命名用户,需要按用户导出,再fromuser touser(imp)或remap_sc ...
- 剑指offer(10)矩形覆盖
题目描述 我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形.请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法? 题目分析 当然也可以逆向思维 应为可以横着放或竖着放,多以f ...
- 使用C#控制台应用程序完成一个2048小游戏
曾经使用C#控制台应用程序写的一个2048,现在翻出来回顾一下 Box类是2048中每一个小格子的相关信息,包括格子的横纵坐标.格子的值和格子是否刚合并这些信息. Grid类是网格的相关信息,包括网格 ...
- selenium+java 模糊搜索列表
判断搜索结果是否正确 例子: 显示列表 相关HTML 获取职位名称元素 List<WebElement> elements = driver.findElements(By.cssSele ...