小程序组件的创建和使用

微信小程序 · lvlvjs · 于 2个月前 发布 · 155 次阅读

本章节内容:小程序自定义组件的创建和使用

参考资料

小程序自定义组件

创建自定义组件

  • 在项目根目录中 创建components => index(component文件夹下文件的名字)文件夹
  • 在新建的components => index 文件夹上 右键'新建 Component'
  • 建入组件的名称之后回车 会自动生成组件对应的4个文件 后缀名分别为.js .json .wxml .wxss

引用组件

组件的引用方式分为 '局部引用' 和 '全局引用'

  • 局部引用:组件只能在当前被引用的页面内使用
  • 全局引用:组件可以在每个小程序页面中使用

    局部引用组件

    在页面的.json配置文件中引用组件的方式 叫做'局部引用'

    //在页面的 .json文件中引用组件
    {
     "usingComponents": {
       "my-component": "/components/index"
    }
    }
    //在页面的.wxml文件中可以直接使用组件
    <view>
    <my-component></my-component>
    </view>
    

    全局引用组件

    在app.json全局配置文件中引用组件的方式 叫做全局引用

    //在app.json文件中引入组件
    {
      "pages": [],
      "window": {},
      "usingComponents": {
          "my-component": "/components/index"
      }
    }
    //在页面的 .wxml文件中 使用组件
    <view>
    <my-component></my-component>
    </view>
    

组件和页面的区别

从表面看 组件和页面都是由.js .json .wxml和.wxss四个文件组件 但是组件和页面的.js与.json文件有明显的不同

  • 组件的 .json 文件中 需要声明 "component": true 属性
  • 组件的 .js 文件中调用的是 Component() 函数
  • 组件的事件处理函数需要定义到 methods 节点中

    methods 方法

    在小程序组件中,事件处理函数和自定义方法需要定义到methods节点中

    Component({
      //组件方法列表[包含事件处理函数和自定义方法]
      methods:{
    //声明处理函数
      }
    })
    

    properties属性

    在小程序组件中 properties是组件的对外属性 用来接收外界传递到组件中的数据

    //wxml文件
    <my-component max='5'></my-component>
    //js文件
    Component({
      //属性定义
      properties:{
          //完整定义属性的方法(当需要指定属性默认值时,建议使用此方式)
          max:{
    		// type 表是要接受的数据的类型
              type:Number,
    		//value 默认值
               value:10
          },
      //简化定义属性方式(不需要指定属性默认值时,可以使用简化方式)
      max:Number
      }
    })
    

    data和properties的区别

    在小程序的组件中 properties属性和data数据的用法相同 他们都是可读可写的

  • data 更倾向于存储组件的私有数据

  • properties更倾向于存储外界传递到组件中的数据

    使用setData 修改properties的值

    由于data数据和properties属性本质上没有任何区别 因此properties属性的值也可以用于页面渲染或使用setData为properties中的属性重新赋值

    自定义组件传参

  • 父组件通过属性的方式给子组件传递参数
  • 子组件通过事件的方式向子组件传递参数

    父传子

    父组件向子组件传递参数,子组件需要在properties中接收传递过来的参数

    //子组件wxml
    <view class="container">
    <view bindtap="close">关闭</view>
    </view>
    //子组件wxss样式
    .container{
    width: 150px;
    height: 150px;
    background-color: green;
    border: 1px solid #000000;
    }
    //父组件wxml
    <view bindtap="childisShow">开启</view>
    <my-component wx:if="{{isShow}}"></my-component>
    </view>
    //父组件js
    //在data中定义
    data:{
    isShow:false
    }
    //声明方法
    childisShow(){
      this.setData({
        isShow:true
      })
    },
    

    子传父

    子传父是通过事件来触发的

  • 1.在子组件中通过 this.triggerEvent(“父组件自定义的事件名”,要传递的参数) 来通过事件传递数据给父组件。
  • 2、 triggerEvent方法可以把组件内部的数据传到外面,触发组件外的事件。它接收3个参数:
    this.triggerEvent('myevent', myEventDetail, myEventOption)。
    

    myEventDetail和myEventOption都是对象,myEventDetail是传到组件外的数据,myEventOption有三个参数可以设置:

  • bubbles 默认false 事件是否冒泡
  • composed 默认false 事件是否可以穿越组件边界
  • capturePhase 默认false 事件是否拥有捕获阶段
    //子组件wxml
    <view class="container">
    <view bindtap="close">关闭</view>
    </view>
    //子组件wxss样式
    .container{
    width: 150px;
    height: 150px;
    background-color: green;
    border: 1px solid #000000;
    }
    //子组件js文件,在methods中声明方法
    methods: {
      close(){
        console.log(!this.data.isShow);
        this.triggerEvent('myEvent',!this.data.isShow)
      }
    }
    

    2、在父组件页面文件用:bind:子组件的事件名=父组件事件名

    //wxml
    <view bindtap="childisShow">开启</view>
    <my-component wx:if="{{isShow}}" bind:myEvent="closechild"></my-component>
    </view>
    //js
    closechild(val){
    //val打印出来的是事件对象,不能直接用val赋值,需要用val.detail才能拿到子组件传递过来的值
      this.setData({
        isShow:val.detail
      })
    }
    
共收到 0 条回复
没有找到数据。
添加回复 (需要登录)
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册