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

首先打开支付宝的小程序开发者工具,并打开你的项目
选中你创建用于放置公用组件的文件,右键 选择新建小程序组件
在小程序顶部会出现一个输入框,要求你输入你要定义的组件名称。
在这里插入图片描述
举例:输入后回车
在这里插入图片描述
在文件中得到一个组件:
因为它是组件,所以并不会被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

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值