有一个联系信息模块，小程序的所有页面都要显示，如果每个页面都添加一次，不仅消耗时间，也不利于后期维护。如果使用自定义组件components就可以实现一个模块全站统一调用，既便于管理也利于维护。

创建全局自定义组件

1、在项目的根目录下的components目录下新建组件（如果没有components目录则手动新建）

在HBuilder编辑器，右键components目录——新建组件，输入组件名称、勾选“创建同名目录”：

点击“创建”按钮后会生成一个包含contact.vue文件的contact目录，contact.vue默认代码：

<template>
    <view>
        
    </view>
</template>

<script>
    export default {
        name:"contact",
        data() {
            return {
                
            };
        }
    }
</script>

<style>

</style>

2、编辑在main.js文件，添加以下代码：

import contact from 'components/contact/contact.vue' 
Vue.component('contact', contact)

作用是把contact组件自定义为全局组件，小程序所有页面都可以调用。

3、在pages目录下编辑文件（如首页index.vue），在<template></template>中间添加自定义组件调用代码：

<contact></contact>

自定义组件传递参数

1、把上面的自定义组件调用代码修改为：

<contact :isShow="true" :position="position" name="联系信息"></contact>

注意：

使用冒号表示绑定的是data里的变量，输出的是变量的数据，不使用冒号表示使用的是字符串，直接输出双引号里面的内容。

在HTML模板中，使用:前缀来表示绑定一个属性到一个表达式（即传递动态数据），如果不使用冒号，属性值将被视为字符串。例如，:position="position"会将变量position的数据绑定到position prop，而不是将字符串"position"作为值。

2、编辑components/contact/contact.vue文件，在data()上面添加props数组，作用是接收页面给组件传递的参数值，代码如下：

<template>
    <view>
        
    </view>
</template>

<script>
    export default {
        name:"contact",
        props:{
            isShow:{
                type:Boolean,
                default:true
            },
            position:{
                type:String,
                default:'right'
            },
            name:{
                type:Number,
                default:'联系信息'
            }
        },
        data() {
            return {
                
            };
        },
        mounted(){
            console.log(this.$props.name) //$props是Vue组件的一个内部属性，用于接收父组件传递给当前组件的所有props
        }
    }
</script>

<style>

</style>

注意：接收父组件传递给当前组件的props不能直接使用this，需要接一个内部属性$props，即this.$props.xxxx