微信小程序怎么自定义局部和全局组件以及组件之间怎么通信

微信小程序怎么自定义局部和全局组件以及组件之间怎么通信

1、在微信小程序中，可以通过自定义组件来实现组件化开发。自定义组件分为局部组件和全局组件，它们之间的数据通信方式略有不同。
2、详细的组件之间的数据通信，请点击这里微信小程序页面之间传参的几种方式

局部组件

• 定义：局部组件是在页面内部定义和使用的组件，只能在当前页面内使用。
• 创建：在页面（父组件）的json文件中，使用usingComponents字段声明局部组件，并指定组件的路径。
• 使用：在页面的wxml文件中，使用自定义标签来引用局部组件，并传递数据给组件。
• 数据通信：局部组件可以通过properties属性接收父组件传递的数据，并通过事件机制向父组件发送数据。

下面是一个详细的例子，演示了局部组件的创建、使用和数据通信

• 在页面（父组件）的json文件中，声明局部组件（全局组件注册在app.json）

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

• 在页面（父组件）的wxml文件中，使用自定义标签引用局部组件，并传递数据

<my-component name="斗帝蓝电霸王龙Pro" bind:myEvent="handleChildEvent"></my-component>

• 在页面（父组件）的js文件中，定义局部组件（子组）件事件的处理函数，并打印子组件传递的数据

Page({
  handleChildEvent(event) {
  // 接受子组件传递过来的数据
    console.log(event.detail.message)  // 斗帝蓝电霸王龙Pro Max
  }
})

• 在局部组件（子组件）的js文件中，接收父组件传递的数据，并通过事件机制向父组件发送数据

Component({
// 接受父组件传递过来的数据
  properties: {
    name: {
      type: String,
      value: ''
    }
  },
  methods: {
    handleClick() {
    // console.log(this.properties.name)  // 斗帝蓝电霸王龙Pro
    // 通过triggerEvent事件将子组件的数据传递给父组件
      this.triggerEvent('myEvent', { message: '斗帝蓝电霸王龙Pro Max' })
    }
  }
})

全局组件

• 定义：全局组件是在app.json文件中定义和注册的组件，可以在所有页面中使用。
• 创建：在app.json文件的usingComponents字段中注册全局组件，并指定组件的路径。
• 使用：在页面的wxml文件中，使用自定义标签来引用全局组件，并传递数据给组件。
• 数据通信：全局组件的数据通信方式与局部组件相同，可以通过properties属性接收父组件传递的数据，并通过事件机制向父组件发送数据。

局部组件和全局组件除了在创建时所处的json位置不一样其他都一样，所以全局组件就不再列举了。

局部组件：

// 定义在局部（父组件）的json中
  "usingComponents": {
    "my-component": "/components/my-component/my-component"
  }
}

全局组件：

// 定义在全局的json中 （父组件的json中不需要再定义了）
  "usingComponents": {
    "my-component": "/components/my-component/my-component"
  }
}