微信小程序中组件的传值

微信小程序中组件的传值

组件与页面之间的样式隔离

Component({
  options: {
  //isolated:默认值隔离
  //apply-shared:页面影响组件
  //shared:相互影响
    styleIsolation: "isolated"
  }
})

页面向组件传值

// 页面向组件传值
Component({
  properties: {
    title: {
      type: String,
      value: '我是默认标题',
      observer: function(newVal,old){
      	console.log(newVal,old)
      }
    }
  }
})
<my-prop title="我是页面传递过来的值"></my-prop>

组件向页面传值

组件中发出事件

<button size="mini" bind:tap="handleIncrement">+1</button>
// 组件向页面的时间
Component({
  methods: {
    handleIncrement(){
      // 触发页面函数
      this.triggerEvent("increment",{},{})
    }
  }
})

页面上响应事件

<my-event bind:increment="handleIncrement"/>
Page({
  data: {
    counter:0
  },
  handleIncrement(){
    this.setData({
      counter:this.data.counter + 1
    })
  }
})

页面直接修改组件的数据

页面

<button size="mini" bind:tap="increment">修改组件中数据</button>
<my-sel class="sel-class"/>

Page({
  // 直接修改组件内的数字
  increment(){
    const my_sel = this.selectComponent('.sel-class')
    console.log(my_sel)

    // my_sel.setData({
    //   counter:my_sel.data.counter + 1
    // })
	// 调用组件的方法对数据进行修改
    // my_sel.incrementCounter(10)
  }
})

组件

<view>组件内的数字:{{counter}}</view>
Component({
  data: {
    counter: 0
  },
  methods: {
    incrementCount(num){
      this.setData({
        counter:counter + num
      })
    }
  }
})

插槽

<view>我是my-slot的头部</view>
<!-- <slot/> -->
<!-- 具名插槽 -->
<view class="slot1"><slot name="slot1"></slot></view>
<view class="slot2"><slot name="slot2"></slot></view>
<view>我是my-slot的尾部</view>

<my-slot>
  <view slot="slot2">我是中间</view>
  <view slot="slot1">我是slot1</view>
</my-slot>