在微信小程序中,父组件获取子组件的属性和方法主要通过以下几个步骤来实现:
定义子组件
- 首先,你需要在子组件的 json 文件中声明这是一个自定义组件。
- 在子组件的 js 文件中定义你想要暴露给父组件的属性和方法。
在父组件中引入子组件
- 在父组件的 json 文件中,使用
usingComponents
字段来引入子组件。
在父组件的 WXML 中使用子组件
- 你可以像使用普通标签一样在父组件的WXML中使用子组件的标签。
- 通过给子组件标签添加
id
属性,你可以在父组件中通过这个id
来引用子组件。
在父组件的 JS 中获取子组件的属性和方法
- 使用
this.selectComponent("#子组件id")
方法来获取子组件的实例。 - 获取到子组件实例后,你就可以调用子组件中暴露出来的方法和访问其属性了。
参考代码
- 子组件 (child-component)
// child-component.js
Component({
properties: {
// 定义属性
name:'斗帝蓝电霸王龙Pro'
},
methods: {
// 定义方法
childMethod() {
console.log('我是斗帝蓝电霸王龙Pro')
}
}
})
- 父组件(json)
// 父组件的 json 文件
{
"usingComponents": {
"child-component": "/path/to/child-component"
}
}
- 父组件(html)
<!-- 父组件的 WXML 文件 -->
<child-component id="myChild"></child-component>
<button bindtap="getParentMethod">Call Child Method</button>
- 父组件(javascript)
// 父组件的 JS 文件
Page({
getParentMethod() {
const child = this.selectComponent("#myChild");
child.childMethod() // 调用子组件的方法 // 我是斗帝蓝电霸王龙Pro
console.log(child.child) // 斗帝蓝电霸王龙Pro
}
})
在这个例子中,当点击按钮时,父组件会调用子组件的
childMethod
方法。注意,你只能调用子组件中明确暴露出来的方法,不能直接访问子组件的私有数据或方法。