支付宝小程序组件化开发与Vue组件化开发对比

by__csdn

于 2021-08-24 11:52:56 发布

阅读量870

点赞数 3

分类专栏：小程序

本文链接：https://blog.youkuaiyun.com/by__csdn/article/details/119886148

版权

vue 小程序前端组件化

小程序专栏收录该内容

6 篇文章

订阅专栏

本文介绍了支付宝小程序和Vue框架下进行组件化开发的步骤。在支付宝小程序中，通过新建组件文件夹、配置组件JSON文件、注册组件JS文件等步骤实现组件创建。在Vue中，组件的创建涉及新建组件文件夹、引入使用组件到父组件等过程。组件化开发有助于代码复用和项目结构的清晰。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、支付宝小程序组件化开发

1.最外层新建文件夹components

2.在components文件夹的右击菜单中,选择新建小程序组件,输入组件名,会自动生成自定义组件所需要的几个文件。

3.组件配置文件 zujan.json 用于声明当前目录是个自定义组件。

4.组件注册 index.js 用于注册一个组件对象。

Component({
  mixins: [], // mixins 方便复用代码
  data: { x: 1 }, // 组件内部数据
  props: { y: 1 }, // 可给外部传入的属性添加默认值
  didMount(){}, // 生命周期函数
  didUpdate(){},
  didUnmount(){},
  methods: {   // 自定义方法
    handleTap() {
      this.setData({ x: this.data.x + 1}); // 可使用 setData 改变内部属性
    }, 
  },
})

5.在需要引入的父组件的 index.json中配置子组件的名称和路径

{
  "usingComponents":{"my-zujian" : "/components/zujan/zujan"}
}

6.在父组件的页面中引用子组件

二、Vue组件化开发

1.src内新建components文件夹 ,新建第一个组件文件夹，新建组件页面

2.在父组件中引入使用