2022-01-08 微信小程序笔记(五) 小程序的组件:父子传值和子父传值

原创

已于 2025-06-12 19:19:52 修改 · 312 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序 #组件 #父子组件通信 #组件传值

于 2022-01-08 19:34:44 首次发布

本文详细介绍了小程序中自定义组件的创建过程，包括在components文件夹下定义组件，以及在页面中引用和使用组件。同时，阐述了小程序组件间的数据传递方式，包括父子组件间的双向通信，通过props进行属性传递和事件触发进行子传父的通信。通过实例代码展示了具体的实现步骤，帮助读者深入理解小程序组件化开发的核心技巧。

文章目录

1.小程序中的自定义组件的级别就相当于components文件夹下的组件

小程序的自定义组件的级别相当于vue中components里面写的页面的某一个单项功能的级别是一样的，只不过需要在小程序中定义，但都是组件化开发

vue项目中component文件夹下的.vue文件一般都是存放能实现单一功能的组件的地方,
如Tabbar.vue,SIdebar.vue,Headswiper.vue等
而views文件夹下的.vue文件一般是页面组件,如Home.vue,Login.vue等

2.创建一个小程序组件的步骤

创建自定义组件

创建components下的文件夹tab,包含四个文件名为index的wxml,wxss,js,json文件,
在index.wxml写入:<text>我是自定义组件</text>,

引用自定义组件

在需要调用的页面(如pages/movies文件夹)的json文件中引入:

{
   
   
  "usingComponents": {
   
   
    "tab":"../../components/tab"
  }
}

再在wxml中使用<tab></tab>
如此,便完成了一个自定义组件的定义和调用

3.小程序组件的父子组件传值

components/tab/index.js中

   properties: {//相当于vue中的props
    },

父子组件传值的步骤:示例(接上例)

父组件:pages/movies/
1.movies.json中引入子组件:

{
  "usingComponents": {
    "tab":"../../components/tab"
  }
}

2.movies.

最低0.47元/天解锁文章