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

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

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

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

<template>
  <div id="app">
    <!--seller绑定，seller必须在v-header中通过props属性声明-->
    <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>标签的内容如下：

<script>
  import header from './components/header/header.vue';     // 引入header.vue文件

  const ERR_OK = 0;  //定义一个常量，便于管理

  export default {
    name: 'App',
    data(){
      return {
        seller:{}  //在data方法中定义一个接受从后台返回数据的对象
      }
    },
    //在生命周期函数中去拿到后台返回的数据，这里利用钩子函数created()
    created(){
      this.$http.get('/api/seller').then((res) => {
        res = res.body;
        if( res.errno === ERR_OK ){
          //请求成功                //这个方法是一个异步的过程，在刚开始的时候seller是一个空的对象
          this.seller = res.data;  //将后台返回的数据存放在data()方法中的属性seller
          console.log(this.seller);
        }
      });
    },
    components:{
      'v-header':header  //注册组件v-header
    }
  }
</script>

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

<script>
    export default {
        //子组件属性seller的声明
        props:{  //子组件通过props属性，获取父组件传递过来的数据
            seller:{
              type:Object
            }
        }
    }
<script>

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

<template>
    <div class="header">
        <div class="content-wrapper">
            <div class="avatar">
                <!--在标签中获取数据的时候，要在属性前面加上v-bind或者简写成':'-->
                <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>
              <!--刚开始的时候，seller是一个空对象，seller.supports[0]为undefined，不解析这段HTML-->
              <!--如果不加上v-if，console会报错-->
              <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指令

<!--刚开始的时候，seller是一个空对象，seller.supports[0]为undefined，不解析这段HTML-->
<!--如果不加上v-if，console会报错-->
<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'，如下面所示

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

<script>
  import header from './components/header/header.vue';

  const ERR_OK = 0;  //定义一个常量，便于管理

  export default {
    name: 'App',
    data(){
      return {
        seller:{}  //在data方法中定义一个接受从后台返回数据的对象
      }
    },
    //在生命周期函数中去拿到后台返回的数据，这里利用钩子函数created()
    created(){
      this.$http.get('/apiller').then((res) => {
        res = res.body;
        if( res.errno === ERR_OK ){
          //请求成功                //这个方法是一个异步的过程，在刚开始的时候seller是一个空的对象
          this.seller = res.data;  //将后台返回的数据存放在data()方法中的属性seller
          console.log(this.seller);
        }
      });
    },
    components:{
      'v-header':header
    }
  }
</script>

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