（五）通过父组件将数据传递给子组件

今天药忘吃喽~ 2022-05-26 11:07 198阅读 0赞

在vue中通过父组件将数据传递给子组件的过程

1）首先在父组件中引用子组件，并且在引用子组件中绑定对象变量

例如在App.vue中引用子组件<v-header>，并且在标签里面绑定seller对象，如下面的代码是App.vue中的<template>中的内容：

<template>
      <div id="app">
        
        <v-header :seller = 'seller'><-header>  //使用自定义的组件
        <div class="tab border-1px">
          <div class="tab-item">
            <router-link to="/goods">商品</router-link>
          </div>
          <div class="tab-item">
            <router-link to="/ratings">评论</router-link>
          </div>
          <div class="tab-item">
            <router-link to="seller">商家</router-link>
          </div>
        </div>
        <router-view></router-view>
      </div>
    </template>

其中'seller'是在App.vue中的<script>标签中的data()中定义的变量，App.vue中的<script>标签的内容如下：

2）然后，在header.vue文件中的<script>标签中的输出语句中声明在App.vue中的<v-header>绑定的变量seller，如下面所示

3）在子组件定义的文件中使用父组件传递过来的数据  
例如：在header.vue中的<template>中的<span>、<div>标签中使用父组件传递过来的数据seller对象（变量的具体使用要看具体情况的定义，这里的seller的type是一个object）

<template>
        <div class="header">
            <div class="content-wrapper">
                <div class="avatar">
                    
                    <img width="64" height="64" :src="seller.avatar">
                </div>
                <div class="content">
                  <div class="title">
                      <span class="brand"></span>
                      <span class="name">{
       {seller.name}}}</span>
                  </div>
                  <div class="description">
                      {
       {seller.description}}/{
       {seller.deliveryTime}}分钟送达
                  </div>
                  
                  
                  <div class="support" v-if="seller.supports">
                      <span class="icon"></span>
                      <span class="text">{
       {seller.supports[0].description}}</span>
                  </div>
                </div>
            </div>
            <div class="bullentin-wrapper">
    
            </div>
        </div>
    </template>

通过上述步骤就完成从父组件传递数据给子组件啦。

**注意**：在上面的代码中有一段代码中使用了v-if指令

<div class="support" v-if="seller.supports">
        <span class="icon"></span>
        <span class="text">{
       {seller.supports[0].description}}</span>
    </div>

如果，不使用v-if指令的话，浏览器会报错：TypeError:Cannot read property '0' of undefined found in 'src\\components\\header\\header.vue'，如下面所示

![20180430172912111][]

这是因为从父组件传递过来的对象seller是在App.vue中异步的方法get()赋值的，没有赋值之前seller是一个空的对象，如下面是App.vue中<script>标签中的代码：

在seller还没有赋值之前，它是一个空的对象，那么在子组件header.vue中通过seller.supports\[0\]访问，其值为undefined，如果加上v-if指令，当访问的值为undefined的时候，浏览器就不会去解析这段代码

[20180430172912111]: /images/20220526/724c271bd67445c1bd06d60c7cff9d71.png