支付宝小程序使用自定义组件(原生)

首先打开支付宝的小程序开发者工具，并打开你的项目
选中你创建用于放置公用组件的文件，右键 选择新建小程序组件。
在小程序顶部会出现一个输入框，要求你输入你要定义的组件名称。

举例：输入后回车

在文件中得到一个组件：
因为它是组件，所以并不会被app.json文件收纳。

紧接着修改你的组件js文件：

Component({
    
  mixins: [], //混入
  data: {
    }, //当前组件使用的公用参数
  props: {
    }, //接收来自父组件传递的参数
  didMount() {
    }, //组件生命周期 构建成功
  didUpdate() {
    }, //组件生命周期 更新
  didUnmount() {
    }, //组件生命周期 //构建失败
  methods: {
    }, //组件公用方法
});

组件的写法与普通页面主要区别就在于js上，样式与页面结构与普通页面一致。
当你修改/编写好你的公用组件后，使用：
首先打开你需要引入的页面的json文件：
复制以下代码进行修改。
usingComponents：使用组件：{‘你的组件名称’,‘组件地址’}

{
    
  "usingComponents": {
    "top-nav": "../../component/topNav/topNav"}
}

注意！！！
这时候的组件名称是自定义的，但是你必须依照小程序的格式进行修改，且必须是小写 + ‘-’ + 小写的格式，否则会抛出异常。

父子组件传参：

在页面中引入：

<top-nav> </top-nav>

传参的要数是必须要你的公用组件中props有定义变量去接收这个参数。
比如：

props:{
    
	title:{
    
      type:String,
      value:'修改前的标题'
    }
}

传参格式是：

<top-nav title='修改后的标题'> </top-nav>

通过你组件的props去接收父组件上传递下来的参数

拿到参数之后，就可以对这个参数进行使用了
over