微信小程序笔记（三）自定义组件

最新推荐文章于 2024-04-20 18:07:38 发布

Abbye-hl

最新推荐文章于 2024-04-20 18:07:38 发布

阅读量1.2k

点赞数 1

分类专栏：笔记文章标签：小程序

本文链接：https://blog.youkuaiyun.com/qq_42404842/article/details/115557305

版权

本文介绍了微信小程序中创建和引用组件的步骤，包括局部和全局引用方式，并详细讲解了组件与页面的区别，如组件需声明`component`: true，使用`Component()`函数等。讨论了组件的样式隔离、数据属性和方法、生命周期函数，如created、attached和detached。此外，还涵盖了父子组件间的通信，包括属性绑定、事件绑定和通过`this.selectComponent()`获取组件实例。最后提到了`behaviors`用于组件代码共享。

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

1.创建组件：在文件夹右键单击选择components，写新建文件夹的名称。里面有四个文件。
2.引用组件的方式：局部：

// 自己的json文件
{
    "usingComponents": {
    "my-test1": "/components/test/test" } }

全局：

app.json文件里

"usingComponents": {
    "my-test2": "/components/test2/test2" }

3.组件与页面的区别：

组件的 .json 文件中需要声明 “component”: true 属性
组件的 .js 文件中调用的是 Component() 函数
整个程序启动调用的是 App()
某个页面的渲染调用的是 Page()
某个组件的渲染调用的是 Component()
组件的事件处理函数需要定义到 methods 节点中
4.组件的样式隔离：组件鱼页面之间不会相互影响 (只有class选择器才不会影响)[id，属性，标签会影响]
可以设置styleIsolation属性修改样式:

// 在组件的.js 文件中新增加如下配置
Component({
    
  options: {
    
   /// apply-shared: // 代表页面wxss样式将影响自定义组件 
   ///shared: // 代表双向的影响 
    styleIsolation: 'isolated'  // 默认值isolated: 代表启动样式隔离 
  } 
})
// 或在组件的.json 文件中新增加如下配置 
{
    
  "styleIsolation": "isolated" 
}

5.组件的数据属性和方法:data中定义数据，methods中定义函数和自定义方法，properties中定义组件对外属性

Components({
    
// 属性定义 
properties: 
{
    
// 完整定义 属性的方式【当需要指定属性默认值时，建议使用此方式】 
  max: {
   
// 属性值的数据类型 type: Number, 
// 属性值的默认值 
    value: 10 
  },
// 简化定义 属性的方式 
    max: Number 
  } 
})
  <my-test1 max="10"></my-test1>
  // ****************子组件*********
  /*** 组件的方法列表 */ 
  methods: {
    
    addN1 () {
    
  /*** 如果 n1 大于 max的值 ，不允许再继续增加 */ 
      if (this.data.n1

最低0.47元/天解锁文章