小程序组件传值

1、组件、插件、类库、框架

组件:具有完整功能(html-视图,css-样式,js-逻辑),并且独立运行的模块
插件:通常是为了完成某项具体的业务功能而开发的js文件 例如:swiper.js,弹框.js,。。。。
类库:library,是提供了为了完成项目的工具方法的集合,跟具体的业务无关! 例如:jQuery,lodash.js
框架:framework,分 是为了快速完成项目搭建的基础。框架分:UI 框架和javaScript框架
   UI框架:boostStrap,Element UI,vant UI,iview,and Design.....
   javaScript框架:vue.js,React.js,Angular.js

2、小程序组件分类

(1)、内置组件:小程序内置组件,直接可以拿来用,无需安装

(2)、第三方组件:需要安装—引入—使用

推荐基于小程序的UI框架:vant UI

官方文档地址:https://vant-contrib.gitee.io/vant-weapp/#/intro
(3)、自定义组件:自己开发组件,然后再项目中多处复用,提高开发效率,这也是组件化的核心思想-
快速创建一个组件的步骤:

  1. 新建的组件构造器:
Component({

})

	2. 文件类型也有4个:wxml,json,js,wxss

3、在需要的页面xxx.json或全局app.json配置文件中引入自定义组件,例如:cate.json

{
  "usingComponents": {
    "Dialog":"/components/dialog/dialog"
  }
}

4、将Dialog显示到wxml视图上 例如:cate.wxml

 

组件之间如何通讯

小程序组件通讯实现方式

  • 第一种:父传子

    • 如何传
     
    
    • 如何接
...
 properties: {
   //要接收的属性
   title:{
     //接收的类型
     type:String,
     //接收的默认值
     value:"此处应该有一个标题"
   },
   content:{
     type:String,
     value:"此处应该是内容"
   }
 },
 ....
})
  • 第二种:子传父
主要通过事件派发,监听模式
Vue:this.$emit('自定义的事件名',要传递的值)
小程序:this.triggerEvent('自定义的事件名',要传递的值,事件选项)


子派发事件:triggerEvent
 //确定逻辑
    confirm_btn() {
      //向父级派发confirm事件
      this.triggerEvent('confirm','您点击确定啦')
    },

父监听:


  • 第三种:兄弟之间
vue兄弟组件传值:bus,vuex

小程序:主要通过利用父级组件当桥梁,来实现兄弟组件通讯

A:父组件:cate

 
 
 
 
B传给C兄弟

B传A:

wxml:

 我是A组件-{{ num }}
 


JS:
 goToParent() {
     this.triggerEvent('A',this.data.num)
   }
 }
 
 
 
A传C  
 
 
   myA(e) {
   this.setData({
     num:e.detail
   })
 }
 
C再将A接的值再接收:

//父级代码:cate
  


C内部的代码:
Component({
 properties: {
   mynum:{
     type:Number,
     value:99
   }
 },
})


 我是B组件--{{ mynum }}

你可能感兴趣的:(小程序)