VUE父组件向子组件传递数据
在使用VUE开发的时候，有时候，我们需要通过父组件像子组件传递数据或者为了防止每个子组件都会有请求数据事件的发生，从而导致代码冗余，所以，我们可以把同一个模块下的所有子组件请求事件都放到父组件中去处理。
1、父组件通过属性的方式给子组件传值
//注意：":city"和":swiperList"这里定义的什么名字，子组件中props接收的就是什么名字
// "city"和"swiper"是你data中定义的名字
<home-header :city='city'></home-header>
<home-swiper :swiperList='swiper'></home-swiper>
//js中
//data中定义好参数名，methods中获取数据并赋值给data中的参数
data(){
return{
city:'',
swiper:[]
}
},
methods:{
getHomeInfo (){
axios.get('/api/index.json')
.then(this.getHomeInfoSuccess)
},
getHomeInfoSuccess(res){
//这里面的数据获取结构取决于你自己的接口返回来的结构
res = res.data
if(res.ret && res.data){
const data = res.data
this.city = data.city
this.swiper = data.swiperList
}
}
},
2、子组件使用props接收父组件传递的属性
子组件props中接收的属性参数只需要给其定义好数据类型，然后直接在模板中使用即可！
Header子组件中：
//template中
<div class="header-right">
{{ this.city }}
<span class="iconfont arrow-icon"></span>
</div>
//js中
props:{
city:String
}
Swiper子组件中：
//template中
<swiper :options="swiperOption">
<swiper-slide v-for="item in swiperList" :key="item.id">
<img class="swiper-img" :src="item.imgUrl" alt="">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
//js中
props:{
swiperList: Array
}
VUE父组件向子组件传递数据相关推荐
- vue 父链和子组件索引_解决Vue2.x父组件与子组件之间的双向绑定问题
最近在研究如何写一套基于Vue2.x的UI组件给自己用,提升一点BIG,在制作含有input的组件遇到一个问题:不知怎样才能把子组件中input与调用者(父组件)的数据实现双向绑定,想过使用Vuex, ...
- vue 父链和子组件索引_vuejs填坑-父子组件之间的访问
有时候我们需要父组件访问子组件,子组件访问父组件,或者是子组件访问根组件. 1. 父组件访问子组件 $children或$ref $children 返回所有子组件的实例,是一个数组 显示两个组件的信 ...
- vue 父链和子组件索引_vue子组件和父组件双向绑定的几种方案
v-model案例 模仿v-model实现案例 我是一串要和内部名字联动的一串文字(父组件) 父组件改变值带动(父组件)点一下试试 .sync方案实现案例 这是父组件的东西.利用这个框改变值,看看有没 ...
- vue 父链和子组件索引_Vue.js 学习笔记 第7章 组件详解
组件(Component)是Vue.js最核心的功能,也是整个框架设计最精彩的地方,当然也是最难掌握的. 本章将带领你由浅入深地学习组件的全部内容,并通过几个实战项目熟练使用Vue组件. 7.1 组件 ...
- 父窗口与子窗口的数据传递问题
曾经有那么一道题目是关于父窗口与子窗口的数据传递问题.我当时只知道父窗口向子窗口传递数据.不知道子窗口怎么向父窗口传递数据.今天终于把这个问题解决了,呵呵,记录一下: 我权且把原始窗口叫父窗口,把从该 ...
- Vue父组件和子组件之间传递数据
Vue父组件和子组件之间传递数据 klmhly 已关注 2018.05.19 19:56* 字数 367 阅读 23评论 0喜欢 0 一.概念解析 挂载点: Vue实例的el属性对应的id,vue只会 ...
- vue 传递多行数据_vue父组件向子组件传递多个数据的实例
在平时我们使用VUE组件的时候,经常需要将父组件的某些数据传递给子组件,这个时候,我们通常会有很多的办法,这里主要分为两种情况: 第一种:静态数据传递:传递一个 字符串 第二种:动态数据传递:绑定一个 ...
- vue父组件变量传递子组件_Vue.js 父组件向子组件传递数据通过 props
我的使用场景:父组件:home.vue 子组件:feed-section.vue 父组件 home.vue 通过请求拿到数据后,传递给子组件 feed-section.vue:因为在子组件中需要渲染 ...
- 【Vue 组件化开发 三】父组件给子组件传递数据、组件通信（父传子、子传父）、父访问子（children、ref）、动态组件（is、component）
目录 一.前言 完整内容请关注: 二.父组件给子组件传递数据 1.使用props属性,父组件向子组件传递数据 1.使用组件的props属性 2.向cmessage对象传值 2. props属性使用 1 ...
最新文章
- Log4net 用法 本地日志
- OpenCV cv::CascadeClassifier人脸检测的实例(附完整代码)
- mysql代表单个字符_mysql字符编码以及字符序
- jax-ws和jax-rs_JAX-RS和OpenAPI对Hypermedia API的支持：任重而道远
- Windows Phone 如何振动手机？
- [Winform]只允许运行一个exe，如果已运行则将窗口置前
- 【kafka】 Error when handling request Name: FetchRequest cannot compare its segment info since it only
- 时序动作定位:Rethinking the Faster R-CNN Architecture for Temporal Action Localization(TAL-Net)
- 软工网络15团队作业4-DAY5
- linux命令（43）：awk的使用技巧
- TinyMC编辑器简介
- 时间序列数据的多元回归_清理和理解多元时间序列数据
- 使用百度地图API进行Android地图应用开发（Eclipse）
- （附源码）spring boot智能服药提醒app 毕业设计 102151
- 消消乐游戏算法实现（三消乐）
- 【Mysql】Error 1826: Duplicate foreign key constraint 错误
- 2015年3月TIOBE编程语言排行榜单
- MySQL字段约束及多表查询---讲解三
- VS Code 快速删除多行的部分内容
- 好记性不如烂笔头--校园网下Parsec远程控制软件的使用