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

最新推荐文章于 2024-08-13 13:04:21 发布

、、划水、、

最新推荐文章于 2024-08-13 13:04:21 发布

阅读量96

点赞数

文章标签：小程序

本文链接：https://blog.csdn.net/huashui996521/article/details/115640288

版权

一、小程序组件复用

组件是什么

组件：具有完整功能（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. 内置组件：小程序内置的组件，直接拿来就可以使用，无需安装
  
  例如：view,text,image,button,swiper,switch…
2. 第三方组件:需要安装，引入，再使用
```
推荐基于小程序的UI框架：vant UI

官方文档地址：https://vant-contrib.gitee.io/vant-weapp/#/intro
```

注：如何让小程序支持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页面上引入标签
自定义组件:自己开发组件，然后再项目中多处复用，提高开发效率，这也是组件化的核心思想

快速创建一个组件的步骤：

1. 新建的组件构造器
2. 文件类型也有4个:wxml,json,js,wxss
3. 在需要的页面xxx.json或全局app.json配置文件中引入自定义组件，例如：cate.json

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

将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>