【小程序】组件之间的数据传递_组件数据传递小程序_JS.Huang

大大的周 02-07 1523

① 给子组件设置属性：用于子组件获取父组件的数据子组件修改数据不会同步到父组件！在页面中使用组件，并给组件设置自定义属性，属性值为需要传递的数据 <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 在小程序中，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>  <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 被调用"); }, }, });