微信小程序:父组件调用子组件的方法

在微信小程序中,父组件获取子组件的属性和方法主要通过以下几个步骤来实现:

定义子组件

  • 首先,你需要在子组件的 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方法。注意,你只能调用子组件中明确暴露出来的方法,不能直接访问子组件的私有数据或方法。

你可能感兴趣的:(微信小程序,小程序)