微信小程序自定义组件开发指南
一、创建自定义组件
在微信小程序中，自定义组件是通过 JSON 文件来定义的。要创建一个自定义组件，我们需要在 `json` 文件夹中添加一个新的 JSON 文件，并将其设置为 `component: true`。
例如，我们可以创建一个名为 `my-component.json` 的文件，其内容如下：
```json{
"component": true,
"usingComponents": []
}
```
二、父组件的操作步骤
在使用自定义组件的父组件中，我们需要进行以下操作：
2.1 在 JSON 文件夹加上使用组件在 `json` 文件夹中添加一个新的 JSON 文件，名为 `index.json`。其内容如下：
```json{
"usingComponents": ["my-component"]
}
```
这里，我们使用了 `my-component` 这个自定义组件。
2.2 在 JS 文件中写好要传递的属性在父组件的 JS 文件中，我们需要写好要传递给子组件的属性。例如：
```javascriptPage({
data: {
myComponentData: {
name: 'John',
age:30 }
},
onLoad() {}
})
```
这里，我们定义了一个 `myComponentData` 的对象，包含 `name` 和 `age` 这两个属性。
2.3 在子组件中获取属性在自定义组件的 JS 文件中，我们需要使用 `this.props` 来获取父组件传递过来的属性。例如：
```javascriptComponent({
properties: {
myComponentData: Object },
data: {},
methods: {}
})
```
这里，我们定义了一个 `myComponentData` 的属性，类型为 `Object`。
2.4 在子组件中使用属性在自定义组件的 JS 文件中，我们可以使用 `this.props.myComponentData` 来获取父组件传递过来的属性。例如：
```javascriptComponent({
properties: {
myComponentData: Object },
data: {},
methods: {
getMyComponentData() {
console.log(this.props.myComponentData)
}
}
})
```
这里，我们定义了一个 `getMyComponentData` 的方法，用于获取父组件传递过来的属性。
三、父组件和子组件相互传值
在微信小程序中，父组件和子组件可以通过 `this.props` 来相互传值。例如：
3.1 父组件传值给子组件在父组件的 JS 文件中，我们需要使用 `this.setData()` 来设置一个新的数据，然后将其传递给子组件。
```javascriptPage({
data: {
myComponentData: {
name: 'John',
age:30 }
},
onLoad() {
this.setData({
myComponentData: {
name: 'Jane',
age:25 }
})
}
})
```
这里，我们设置了一个新的 `myComponentData` 的数据，然后将其传递给子组件。
3.2 子组件接收父组件的值在自定义组件的 JS 文件中，我们需要使用 `this.props` 来获取父组件传递过来的属性。例如：
```javascriptComponent({
properties: {
myComponentData: Object },
data: {},
methods: {}
})
```
这里，我们定义了一个 `myComponentData` 的属性，类型为 `Object`。
3.3 子组件使用父组件的值在自定义组件的 JS 文件中，我们可以使用 `this.props.myComponentData` 来获取父组件传递过来的属性。例如：
```javascriptComponent({
properties: {
myComponentData: Object },
data: {},
methods: {
getMyComponentData() {
console.log(this.props.myComponentData)
}
}
})
```
这里，我们定义了一个 `getMyComponentData` 的方法，用于获取父组件传递过来的属性。
通过以上步骤，我们可以实现父组件和子组件之间的数据传值。
