微信小程序-页面访问组件数据和方法

合集 - 微信小程序(60)

1.小程序开发概述2023-04-022.创建第一个小程序2023-04-023.微信小程序app.json文件2023-04-024.微信小程序-sitemap.json文件2023-04-025.微信小程序app.js文件2023-04-026.微信小程序app.wxss文件2023-04-027.微信小程序-project.config.json文件2023-04-068.微信小程序-页面.json文件2023-04-059.微信小程序-页面.js文件2023-04-0510.微信小程序-组件创建和使用2023-04-0611.微信小程序-组件-.json文件2023-04-0612.微信小程序-组件-.js文件2023-04-0613.微信小程序-WXSS学什么2023-04-0714.微信小程序-WXSS的书写格式2023-04-0715.微信小程序-新增RPX响应式单位2023-04-0716.微信小程序-什么是WXML2023-04-0917.微信小程序-WXML数据绑定2023-04-0918.微信小程序-WXML条件渲染2023-04-0919.微信小程序-WXML的hidden属性2023-04-0820.微信小程序-WXML列表渲染2023-04-0921.微信小程序-WXML列表渲染Key2023-04-0922.微信小程序-WXML包装元素2023-04-0923.微信小程序-WXS的作用和使用2023-04-1424.微信小程序-WXS独立文件2023-04-1425.微信小程序-WXS支持的语法2023-04-1426.微信小程序-小程序事件绑定2023-04-1627.微信小程序-小程序事件冒泡和事件捕获2023-04-1628.微信小程序-事件传递数据2023-04-1629.微信小程序-data和mark2023-04-2030.微信小程序-touches和changedTouches2023-04-2131.微信小程序-案例练习2023-04-2132.微信小程序-view组件2023-04-2233.微信小程序-text组件2023-04-2234.微信小程序-icon组件2023-04-2235.微信小程序-button组件2023-04-2236.微信小程序-image组件2023-04-2437.微信小程序-scrollview2023-05-1338.微信小程序-image组件-选择相册资源案例2023-04-2439.微信小程序-自定义组件2023-05-1340.微信小程序-自定义组件样式隔离2023-05-1441.微信小程序-自定义组件外部样式2023-05-1442.微信小程序-传递数据父传子2023-05-1443.微信小程序-传递数据子传父2023-05-14

44.微信小程序-页面访问组件数据和方法2023-05-14

45.微信小程序-组件通讯练习2023-05-1446.微信小程序-单个插槽2023-05-1547.微信小程序-多个插槽-具名插槽2023-05-1648.微信小程序-behaviors2023-05-1749.微信小程序-双线程渲染模型2023-05-1850.微信小程序-页面生命周期2023-05-2051.微信小程序-页面生命周期方法2023-05-2152.微信小程序-组件生命周期方法2023-05-2153.微信小程序-应用程序生命周期方法2023-05-2154.微信小程序-页面跳转Tabbar2023-05-2155.微信小程序-页面跳转navigator组件2023-05-2156.微信小程序-页面跳转wxAPI2023-05-2157.微信小程序-页面跳转数据传递2023-05-2158.微信小程序-常用弹窗2023-05-2159.微信小程序-Storage2023-05-2160.微信小程序-获取用户位置2023-05-21

收起

首先，创建演示案例的组件，c-demo，在给我们的组件添加一个按钮，并且给这个按钮绑定一个点击事件：

<!-- 
  c-demo2.wxml
 -->
<button 
bindtap="onCDemoTap"
type="primary"
>
我是c-demo按钮
</button>

JS:

// components/c-demo2/c-demo2.js
Component({
  /**
   * 组件的初始数据
   */
  data: {
    title: 'BNTang'
  },
  /**
   * 组件的方法列表
   */
  methods: {
    onCDemoTap(e) {
      console.log(e);
    }
  }
})

改造首页：

<!-- 
  index.wxml
 -->
<myDemo2/>
<button bindtap="onIndexTap">我是首页的按钮</button>

首页 JS 文件：

Page({
  onIndexTap(e) {
    console.log(e);
  }
});

获取组件实例

好了，结构搭建的差不多了，接下来就是来看关键的内容了，首先我们来看一下如何拿到一个自定义组件的实例，有两种方式，这两种方式的前提条件是，给这个组件设置一个标识，设置标识的方式可以是通过类名或者ID进行设置，然后通过这个标识得到组件实例。

?> 通过类名：

<!-- 
  index.wxml
 -->
<myDemo2 class="my-demo"/>
<button bindtap="onIndexTap">我是首页的按钮</button>

首页 JS 文件：

Page({
  onIndexTap(e) {
    console.log(this.selectComponent(".my-demo"));
  }
});

?> 通过ID

<!-- 
  index.wxml
 -->
<myDemo2 id="my-demo"/>
<button bindtap="onIndexTap">我是首页的按钮</button>

首页 JS 文件：

Page({
  onIndexTap(e) {
    console.log(this.selectComponent("#my-demo"));
  }
});

访问自定义组件的方法与数据

上面已经介绍过了如何获取组件的实例，这样子就可以通过该实例对象调用实例当中所对应的内容和获取对应的内容。

调用方法

c-demo 的 JS 文件，新增一个函数方法供外界调用测试使用：

// components/c-demo2/c-demo2.js
Component({
  methods: {
    myDemoTwoFn() {
      console.log("call myDemoTwoFn");
    }
  }
})

首页的 JS 文件：

Page({
  onIndexTap(e) {
    this.selectComponent("#my-demo").myDemoTwoFn();
  }
});

获取数据

首页的 JS 文件：

Page({
  onIndexTap(e) {
    console.log(this.selectComponent("#my-demo").data);
  }
});

总结

• 想在页面中调用组件中的方法，我们可以给组件添加一个类名或者ID
• 然后通过 this.selectComponent("选择器") 拿到组件实例对象
• 然后再通过组件的实例对象调用组件的方法或者访问组件的数据即可