组件如何实现复用，简单演示

我们在写页面的时候，经常会遇到一些相似的页面模块，我们这时候就可以复用组件来提高开发效率。

自定义组件：HelloWord

首先我们写一个自定义的组件，我数据是写死的，但是通过axios接收后台的数据的做法也很简单，也要用到父子组件传值，我之前有提过。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>{{info}}</p>
     <ul>
       <li v-for="(movie,index) in movieName" :key="`${index}`">{{movie.name}}</li>
     </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
    info:String,
    movieName:Array
  }
}
</script>
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

Home页面引用HelloWord组件

<template>
  <div class="home">
    <HelloWorld 
    :msg="msg" 
    :info="info" 
    :movieName="movieName" />
    <HelloWorld 
    :msg="msg1" 
    :info="info1" 
    :movieName="movieName1" />
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  data(){
    return{
      msg:"欢迎来到你的vue页面",
      msg1:"欢迎你再次光临",
      info:"嗯，我来啦",
      info1:"我又来了,额",
      movieName:[{
        name:"赌侠"
      },
      {
        name:"毒战"
      },
      {
        name:"澳门风云"
      }],
       movieName1:[{
        name:"功夫"
      },
      {
        name:"功夫熊猫"
      },
      {
        name:"西门飞甲"
      }]
    }
  },
  components: {
    HelloWorld
  }
}
</script>

About页面引用HelloWord组件

<template>
  <div class="about">
    <HelloWorld 
    :msg="msg" 
    :info="info" 
    :movieName="movieName" />
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'about',
  data(){
    return{
      msg:"这是关于页面",
      info:"关于什么的",
      movieName:[{
        name:"功夫"
      },
      {
        name:"功夫熊猫"
      },
      {
        name:"西门飞甲"
      }]
    }
  },
  components: {
    HelloWorld
  }
}
</script>

效果展示