ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

小程序之间的组件传值详解

2021-04-12 20:59:22  阅读:23  来源: 互联网

标签:vant 程序 js json 详解 UI 组件 传值


一、小程序组件复用

  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
  1. 小程序组件分类

    1. 内置组件:小程序内置的组件,直接拿来就可以使用,无需安装

      例如:view,text,image,button,swiper,switch…

    2. 第三方组件:需要安装,引入,再使用

    推荐基于小程序的UI框架:vant UI
    
    官方文档地址:https://vant-contrib.gitee.io/vant-weapp/#/intro
    

注:如何让小程序支持npm:

  1. 生成package.json:npm init -y

  2. 安装vant: npm i @vant/weapp -S --production

  3. 将 app.json 中的 "style": "v2" 去除

  4. 勾选开发者工具-详情–本地设置-npm模块

  5. 选择微信开发者工具-工具-构建npm

  6. 使用第三方vant组件
    第一步:在app.json或当前页面的json文件中的usingComponents引入
    第二步:在wxml页面上引入标签

  7. 自定义组件:自己开发组件,然后再项目中多处复用,提高开发效率,这也是组件化的核心思想

快速创建一个组件的步骤:
1. 新建的组件构造器
2. 文件类型也有4个:wxml,json,js,wxss
3. 在需要的页面xxx.json或全局app.json配置文件中引入自定义组件,例如:cate.json
{
  "usingComponents": {
    "Dialog":"/components/dialog/dialog"
  }
}
  1. 将Dialog显示到wxml视图上 例如:cate.wxml

     <Dialog-box />
    
    • 组件之间如何通讯:

      思考一下:在Vue中,如何通过父级组件改变子组件中的值???

      A.vue

      import .....
      components:{B}
      
      template
      	<B ref="b" />
      
      mehtods:{
      	change() {
      	   this.$refs.b.hello()
      	}
      }
      

      B.vue

      methods:{
      	hello() {...}
      }
      
    • 小程序如何获取子组件的实例呢

    this.selectComponent('选择器名称')
    
    例如: this.dialog=this.selectComponent('#dialog')  //通常写在onLoad
    
    • 小程序组件通讯实现方式

      • 第一种:父传子

        • 如何传
          <Dialog-box 
              id="dialog"
              title="订单信息"
              content="订单支付内容"
          />
        
        • 如何接
        Component({
         ...
          properties: {
            //要接收的属性
            title:{
              //接收的类型
              type:String,
              //接收的默认值
              value:"此处应该有一个标题"
            },
            content:{
              type:String,
              value:"此处应该是内容"
            }
          },
          ....
        })
        
      • 第二种:子传父

      主要通过事件派发,监听模式
      Vue:this.$emit('自定义的事件名',要传递的值)
      小程序:this.triggerEvent('自定义的事件名',要传递的值,事件选项)
      
      
      子派发事件:triggerEvent
       //确定逻辑
          confirm_btn() {
            //向父级派发confirm事件
            this.triggerEvent('confirm','您点击确定啦')
          },
      
      父监听:
      
      <Dialog-box 
            id="dialog"
            title="订单信息"
            content="订单支付内容"
            bind:confirm="myconfirm"
            bind:cancel="mycancel"
        />
      
      • 第三种:兄弟之间
      vue兄弟组件传值:bus,vuex
      
      小程序:主要通过利用父级组件当桥梁,来实现兄弟组件通讯
      
      A:父组件:cate
      
        <A bind:A="myA"/>
        <B mynum="{{ num }}"/>
        
        
      B传给C兄弟
      
      B传A:
      
      wxml:
      <view>
        <text>我是A组件-{{ num }}</text>
        <view><button size="mini" bindtap="goToParent">把A的数据发送给B组件</button></view>
      </view>
      
      JS:
        goToParent() {
            this.triggerEvent('A',this.data.num)
          }
        }
        
        
        
      A传C  
        <A bind:A="myA"/>
        
          myA(e) {
          this.setData({
            num:e.detail
          })
        }
        
       C再将A接的值再接收:
       
       //父级代码:cate
         <B mynum="{{ num }}"/>
       
       
       C内部的代码:
      Component({
        properties: {
          mynum:{
            type:Number,
            value:99
          }
        },
      })
      
      <view>
        <text>我是B组件--{{ mynum }}</text>
      </view>
      

标签:vant,程序,js,json,详解,UI,组件,传值
来源: https://blog.csdn.net/huashui996521/article/details/115640288

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有