小程序组件复用

2021-04-12 21:58:57 阅读：154 来源： 互联网

1.组件是什么

组件：

			有完整的功能，在代码中可以独立运行

插件：

			通常说为了某个功能而开发的，列如：轮播图

类库(library)：

		是用来完成项目的工具的集合

框架(framework)：

		是为了快速完成项目搭建的基础。框架分为：UI 框架和javaScript框架

2.小程序组件分类

1. 内置组件：

	小程序内置的组件，直接拿来就可以使用，无需安装
例如：view,text,image,button,swiper,switch....

2. 第三方组件:

	需要安装，引入，再使用

3. 如何让小程序支持npm:

生成package.json:npm init -y
安装vant: npm i @vant/weapp -S --production
将 app.json 中的 “style”: “v2” 去除
勾选开发者工具-详情–本地设置-npm模块
选择微信左上角的开发者工具-工具-构建npm
使用第三方vant组件

第一步：在app.json或当前页面的json文件中的usingComponents引入

第二步：在wxml页面上引入标签

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

新建的组件构造器：

Component({

})
		2. 文件类型也有4个:wxml,json,js,wxss
  		3. 在需要的页面xxx.json或全局app.json配置
  			文件中引入自定义组件，例如：cate.json
{
  "usingComponents": {
    "Dialog":"/components/dialog/dialog"
  }
}
4. 将Dialog显示到wxml视图上 例如：cate.wxml
     <Dialog-box />

5. 组件之间如何通讯：

第一种：父传子
1.如何传

 <Dialog-box 
     id="dialog"
     title="订单信息"
     content="订单支付内容"
 />


2. 如何接

 Component({
    ...
    properties: {
    //要接收的属性
        title:{
        	//接收的类型
        	type:String,
        	//接收的默认值
        	value:"此处应该有一个标题"
    	},
    	content:{
       		type:String,
       		value:"此处应该是内容"
    	}
 	},
})

	1. 第二种：子传父
        主要通过事件派发，监听模式
        Vue：this.$emit('自定义的事件名',要传递的值)
        小程序：this.triggerEvent('自定义的事件名',要传递的值,事件选项)
 

        子派发事件：triggerEvent
         //确定逻辑
            confirm_btn() {
              //向父级派发confirm事件
              this.triggerEvent('confirm','您点击确定啦')
            },
        
        父监听：
        
        <Dialog-box 
              id="dialog"
              title="订单信息"
              content="订单支付内容"
              bind:confirm="myconfirm"
              bind:cancel="mycancel"
          />

1. 第三种：兄弟之间

        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 }}"/>
 

xt>我是B组件--{{ mynum }}</text>
        </view>
        ```
         C内部的代码：
        Component({
          properties: {
            mynum:{
              type:Number,
              value:99
            }
          },
        })
        
        <view>
          <text>我是B组件--{{ mynum }}</text>
        </view>

标签：npm,自定义,wxml,程序,复用,json,num,组件
来源： https://blog.csdn.net/weixin_46031196/article/details/115642509

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9