① 给子组件设置属性:
- 用于子组件获取父组件的数据
- 子组件修改数据不会同步到父组件!
- 在页面中使用组件,并给组件设置自定义属性,属性值为需要传递的数据
<my-po pageNum="{{18}}"></my-po>
- 在组件中,需要设置
properties
接收数据
Component({
// 组件的属性列表:接收外部传入的数据
properties: {
// 写法 1 : 接收传入的数据,并且指定传入值的类型为 String
pageNum: String,
// 写法 2 : 接收传入的数据
// pageNum: {
// type: String, // 指定传入值的类型为 String
// value: 18, // 设置默认值,注意,这里的默认值是 Number 类型的
// },
},
methods: {
showPageNum() {
// 在组件的 js 文件中获取 pageNum
let pageNum = this.properties.pageNum;
console.log("pageNum", typeof pageNum, pageNum);
},
},
});
接收数据之后,便可在组件的 WXML 中通过 {{}}
使用
<view>pageNum: {{pageNum}}</view>
<button bindtap="showPageNum">点击打印数据</button>
可以发现,我们传入的数据 18
是 Number 类型的,可是打印的数据却是 String 类型的,因为 properties
指定传入值类型时,如果不是指定类型,会进行强制转换
data
& properties
Component({
// 组件的属性列表:接收外部传入的数据
properties: {
pageNum: {
type: Number,
value: 18,
},
},
// 组件的初始数据:组件私有的数据
data: {
comNum: 0,
},
// 组件的方法列表
methods: {
showPageNum() {
console.log("this.data", this.data);
console.log("this.properties", this.properties);
console.log(this.data === this.properties); // true
},
},
});
我们可以发现,this.data
、this.properties
是同一个对象的引用
数据的修改
<view>home:</view>
<view wx:for="{{arrData}}" wx:key="index">
{{item.name}} : {{item.price}}
</view>
<button type="primary" bindtap="changeData">点击修改数据</button>
<view>---------------------------------------------------</view>
<!-- 使用组件 -->
<my-po userData="{{arrData}}"></my-po>
Page({
data: {
arrData: [
{ name: "JS", price: 100 },
{ name: "C++", price: 200 },
{ name: "Java", price: 300 },
],
},
// 修改页面的数据
changeData() {
this.setData({
arrData: [
{ name: "C++", price: 200 },
{ name: "Java", price: 300 },
],
});
},
});
<view>test2:</view>
<view wx:for="{{userData}}" wx:key="index">
{{item.name}} : {{item.price}}
</view>
<button type="primary" bindtap="changePro">点击修改数据</button>
Component({
properties: {
userData: Array, // 得到页面传过来的数组
},
methods: {
// 修改页面传递过来的数据
changePro() {
this.setData({
userData: [
{ name: "JS", price: 100 },
{ name: "C++", price: 200 },
],
});
},
},
});
我们可以发现:
在组件中,修改数据后,组件中的数据确实被改变了,但页面的数据不会被影响
在页面中,修改数据后,页面和组件中的数据都会被改变,且整个页面都会被重新渲染
事件方法 & 普通方法
我们约定,普通方法以 _
开头:
<view> name: {{ name }} </view>
<button bindtap="modifyName"> modify name </button>
Component({
data: {
name: "superman",
},
methods: {
// 事件方法
modifyName() {
this.setData({ name: this.data.name + "!" });
this._showData();
},
// 普通方法
_showData() {
console.log("新数据:", this.data.name);
},
},
});
② 给子组件绑定事件:
- 用于父组件获取子组件的数据
- 我们可以用 “绑定事件” 配合 “设置组件属性” 的方式,实现子组件与父组件的数据同步
- 我们使用
bind:sync
/bindsync
绑定事件
<view>父组件的 num:{{num}}</view>
<!-- 给子组件绑定自定义事件,事件函数为父组件中的方法 -->
<my-po num="{{num}}" bindsync="syncNum"></my-po>
Page({
data: {
num: 1102,
},
// 在父组件中定义一个方法,用来同步在子组件中产生变化的数据
syncNum(e) {
// 通过 `e.detail.子组件中定义的属性名` 获取子组件传递过来的数据
console.log("sync", e.detail.value);
this.setData({
// 修改父组件中的数据
num: e.detail.value,
});
},
});
<view>子组件接收到的 num:{{num}}</view>
<button bindtap="changeNum">点击修改</button>
Component({
properties: {
num: Number,
},
methods: {
changeNum() {
// 修改子组件接收到的数据
this.setData({ num: this.data.num + 1 });
// 通过 triggerEvent 调用父组件绑定在子组件上的事件,并传入数据参数
// 格式: this.triggerEvent("绑定的事件名", { 自定义属性名: 传递的数据 })
this.triggerEvent("sync", { value: this.properties.num });
},
},
});
③ 获取子组件实例对象:
- 用于父组件获取子组件的数据
- 这个方法非常暴力,直接在父组件中获取整个子组件实例
<view>父组件的 num: {{num}}</view>
<button bindtap="getChild">修改子组件数据</button>
<!-- 给子组件设置 id / class 属性 -->
<my-po num="{{num}}" id="child"></my-po>
Page({
data: {
num: 1,
},
getChild() {
// 通过 selectComponent 获取子组件实例
const child = this.selectComponent("#child");
// 直接在父组件中修改子组件数据
child.setData({
// 注意:这里的子组件数据是通过 child 获取的,不是 this
num: child.properties.num + 1,
});
// 直接在父组件中调用子组件的方法
child.showSome();
},
});
<view>子组件接收到的 num: {{num}}</view>
<button bindtap="changeNum">点击修改</button>
Component({
properties: {
num: Number,
},
methods: {
changeNum() {
this.setData({ num: this.properties.num + 1 });
},
showSome() {
console.log("子组件中的方法 showSome 被调用");
},
},
});