vue商品列表页面组件父子组件传值的应用——代码复用性

vue商品列表页面获组件父传子的应用

写前端页面时很多时候我们会遇到一种很多页面的架构都差不多，只需要标题变一变就可以的情况，比如说下图这个分类列表，我们以教育培训类和互联网运营类两个列表请求页面为例。


这两页面只有标题稍稍不同，当然请求地址的参数也不尽相同。

1、我们先试试怎么让这个标题组件通过父传子得到复用。

首先熟悉一下父子组件：job11和job12是父组件，在这里相当于是教育培训类和互联网运营类的list页面，header是子组件，就是每个页面的标题。

job11.vue父组件的代码：

<template>
<div class="app">
	//子组件header，绑定toptitle的值
    <home-header  class="TOP" :message='topTitle'></home-header>
    <joblist :typeone="one" :typetwo="two" class="Middle"></joblist>
</div>
    
</template>

<script>
import HomeHeader from "@/components/common/header"
import Joblist from "@/components/home/joblist"
export default {
    components:{
        // 局部组件
        HomeHeader,
        Joblist
    },
    data(){
        return{
            topTitle: '日结-教育培训',
            one:'日结',
            two:'教育培训类'
        }
    },
}
</script>
<style lang="scss">
    .app{
        background-color: white;
    }
    .TOP {
        position: fixed;
    }
    .Middle{
        padding-top:50px
    }
</style>

header.vue子组件的代码：

利用props接收，当然如果是两个值，就写成数组的格式

<template>
  <div class="app">
      <p class="TITLE">{{title}}</p>
  </div>
</template>

<script>
export default {
  props: ['message'],
  data () {
    return {
      title: this.message
    }
  }
}
</script>

<style lang='scss'>
// position: fixed;不能加全局？
.app {
  // position: fixed;
  width: 100%;
  height: 40px;
  text-align: center;
  background-color: white;
  z-index: 100000;
}
.TITLE {
  margin-top:12px;
  font-family: 微软雅黑;
  font-weight: bold;
  font-size: 18px;
  color: #FF9000;
  height: 18px;
  letter-spacing: 5px;
}
</style>