VUE父组件向子组件传递数据

秒速五厘米 2023-03-02 15:57 7阅读 0赞

在使用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">&\#xe62d;</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

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关父组件向子组件传递数据

既然存在父子关系，所以，肯定是在父组件中调用了子组件。而父组件向子组件传递的数据，可以通过在子组件上定义属性，将数据传递给自定义属性的值的方式，来实现父组件向子组件传递数据

太过爱你忘了你带给我的痛/ 2023年08月17日 17:09/ 0 赞/ 151 阅读

相关 vue中父组件向子组件传递值、方法

> 在vue中子组件是默认无法访问到父组件data中的数据和methods中的方法的,所以我们需要使用特定的方法来完成它。一、父组件向子组件传值通过 props

ゝ一世哀愁。/ 2023年07月13日 11:00/ 0 赞/ 166 阅读

相关 VUE父组件向子组件传递数据

在使用VUE开发的时候，有时候，我们需要通过父组件像子组件传递数据或者为了防止每个子组件都会有请求数据事件的发生，从而导致代码冗余，所以，我们可以把同一个模块下的所有子组

秒速五厘米/ 2023年03月02日 15:57/ 0 赞/ 8 阅读

相关 UNI-APP页面通讯、组件子向父、父向子传递数据

方法一（父向子传递数据）：父页面  <params v-if="tabs.length-TabCur>3" :tabcur='Tab

川长思鸟来/ 2023年01月13日 01:51/ 0 赞/ 575 阅读

相关 Vue中子组件向父组件传递参数

> / > 父子组件传递数据 > 1）子组件向父组件传递数据：事件机制 > 子组件给父组件传递一个事件，并携带上数据 >

忘是亡心i/ 2022年11月10日 05:42/ 0 赞/ 206 阅读

相关子组件传递数据到父组件(vue.js)

父组件: app.vue <template> <div id="app"> <img src="./assets/logo.png">

青旅半醒/ 2022年06月13日 11:59/ 0 赞/ 290 阅读

相关父组件向子组件传递数据(vue.js)

父组件: app.vue 子组件: header.vue 子组件: <template> <div> <!-- logo 是在

深藏阁楼爱情的钟/ 2022年06月13日 09:11/ 0 赞/ 280 阅读

相关 vue2.0中的组件通信2——子组件向父组件传递数据

上一篇我写了父组件如何向子组件下发数据的操作，今天我们来聊聊子组件如何向父组件发送数据。在Vue.js中是通过事件来完成子组件向父组件发送数据的。代码沿用[上一篇][Li

灰太狼/ 2022年05月29日 07:57/ 0 赞/ 218 阅读

相关 Vue2 框架整理：组件props，父组件向子组件传递数据，单向数据流

![这里写图片描述][70] vue的组件除了要把模板内的内容进行复用外，更重要的是组件间要进行通信。父组件向子组件传递数据：通常子组件会通过父组件传递来的数据或参数

谁借莪１个温暖的怀抱￠/ 2022年05月22日 09:10/ 0 赞/ 408 阅读

相关 Vue父组件向子组件传递参数

1、父组件projectBatchsindex.vue // 使用:projectId="this.projectId" 传递参数 <ProjectBatch

以你之姓@/ 2022年02月14日 09:17/ 0 赞/ 345 阅读