[toc]

⽗组件通过属性的⽅式给⼦组件传递参数

1、父组件定义传参属性

demo.wxml

<!--pages/demo/demo.wxml-->
<my-header father_data="father"></my-header>

2、子组件属性接收并定义

myHeader.js

// components/myHeader.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    father_data:{
      type:String,
      value:""
    },
    
  },

  /**
   * 组件的初始数据
   */
  data: {
    comData:"MY COMPONENTS"
  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

3、子组件使用参数

myHeader.wxml

<!--components/myHeader.wxml-->
<view class="sw">{{comData}}--{{father_data}}</view>
<swiper indicator-dots="true" autoplay="true" circular="true">
  <swiper-item ><image src="http://liudongdong.top/upload/2021/03/image-b211691504cc421f893e2a728ef3e1d7.jpg"></image></swiper-item>
  <swiper-item ><image src="http://liudongdong.top/upload/2021/03/image-b211691504cc421f893e2a728ef3e1d7.jpg"></image></swiper-item>
  <swiper-item ><image src="http://liudongdong.top/upload/2021/03/image-b211691504cc421f893e2a728ef3e1d7.jpg"></image></swiper-item>
</swiper>

效果
image.png

image.png
image.png

Q.E.D.


只有创造,才是真正的享受,只有拚搏,才是充实的生活。