微信小程序 父子组件传值通信

微信小程序自定义组件

微信小程序 父子组件传值通信

https://blog.csdn.net/weixin_43410419/article/details/89951670  小程序components的生命周期

微信小程序生命周期、页面生命周期、组件生命周期

新建组件 --> 选择新建Component

//引用自定义组件的页面 page.json
{
  "usingComponents": {
     "v-banner": "/components/banner/index",
     "v-cart": "/components/cart/index"
  }
}

<v-banner><v-banner>

子组件：

wxml:
<view bindtap='change'> 123 
    <view wx:for="{{imgs}}"></view>
</view>

wx.js:
data: {
    current:0
  },
 * 组件的属性列表
   */
  properties: {
    // v:String,
    // n:Number
    imgs:Array 
    productAttr:{
      type: Object,
      value: {}, //[] 数组默认值
    },
  },

  methods: {
    change(e){
        console.log(e.detail.current)
        this.setData({
          current: e.detail.current
        })
      this.triggerEvent("c", e.detail.current) !!!!!
    }
    this.triggerEvent("shrin",{a:1,b:2}) //传递多个值时用对象
 }

/*组件生命周期*/ 
  lifetimes: {
    created() {
      // console.log("在组件实例刚刚被创建时执行")
      //注意此时不能调用setData
    },
    ready() {
      console.log("在组件在视图层布局完成后执行")
      console.log(this.data.productAttr) //查看父组件传过来的值
      this.unshrinkage();
    },
  },
  /*组件所在页面的生命周期 */
  pageLifetimes: {
    show: function () {
      // 页面被展示
      // console.log("页面被展示");
    },
  },

vue:
props:{
  btnvalue:{
    type:[Number,String],
    default:10,
    required:true 
 },

父组件：

wxml：
<my-swiper bind:c='changeFn' imgs="{{urls}}"/> <!--子组件就要定义imgs的属性列表 imgs:Array-->

wx.js:
data: {
    now:0,
    urls:[
      "/imgs/01.jpg",
      "/imgs/02.jpg",
      "/imgs/03.jpg"
    ]
  },
changeFn(e){
  console.log(e)
  this.setData({
    now:e.detail
  })
}

父组件直接绑定事件
<authorize bind:onLoadFun='onLoadFun'></authorize>

onLoadFun: function () {
    this.setLeveLComplete();
    this.getLocation();
  },

传多个值、绑定多个事件：事件在页面js中

页面上的组件：
<product-window storeInfo="{{storeInfo}}" productAttr="{{productAttr}}" productSelect="{{productSelect}}" bind:ChangeAttr="ChangeAttr" bind:ChangeCartNum="ChangeCartNum" id='product-window'></product-window>

子组件值的接收：
Component({
  properties: {
    storeInfo:{
      type: Object,
      value: {}
    },
    productAttr:{
      type: Object,
      value: [],
    },
    productSelect:{
      type: Object,
      value: {
        image: '',
        store_name: '',
        price: 0,
        unique: '',
        stock:0,
      }
    },
  },
)
vue.js:
props:{
  btnvalue:{
    type:[Number,String],
    default:10,
    required:true 
 },