利用props进行组件传值

项目搭建过程中，往往因为一些功能或者布局的重复编写，这样往往会造成代码工程量的庞大，和代码的冗余。为解决这个问题，往往进行组件的封装，对代码中重复代码进行封装时会涉及到组件的传值，下面用一个具体的例子讲一下prop传值。

1，封装header组件

export default {
  name: 'Header',(这里的name不能为小写，会报错)
  props : {
      title : {
          type : String,
          default : '喵喵电影'
      }
  }
};

2,将数据绑定到header

<template>
  <header>
    <h1>{{ title }}</h1>
  </header>
</template> 

3,页面中引入header:

<template>
    <Header />
</template>

import Header from '@/components/Header';

components: {
    Header
  }

4,将title的值进行改变

 <Header title="我的影院"/>
  <Header title="喵喵影院"/>
  <Header title="喵喵电影"/>

这样在不同的页面，title展示不同的内容。