经常碰到需要重复调用的功能模块，每个页面重复写很麻烦，可以通过模块的方式引入到需要的页面

Step 1 ==> 创建模块文件 components/list/list.vue

<template name="records">
  <view>{{appName}}公用功能</view>
  <view>如果有v-if需要注意外面一定要包一层view，否则会报错</view>
</template>
<script>
	export default {
		name:"records",
		data() {
			return {
                          appName: "haha"
                        }
                        }
</script>
<style lang="scss">

</style>

Step 2 ==> 需要调用的页面

<template>
  <view>
    <records :appName="appName"></records>
  </view>
</template>
<script>
  import records from '@/components/records/records.vue'
  export default {
    components:{
      records //这里是组件中name名称，在import引入的时候名称要一致
    },
    data() {},
    onShow(){
      this.appName='新名称'
    }
}