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

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

首先，创建演示案例的组件，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("选择器") 拿到组件实例对象
然后再通过组件的实例对象调用组件的方法或者访问组件的数据即可

0 条评论