小程序的通信,vantweapp模块安装,以及自定义组件,slot插槽,监听observers_黛玉葬花也葬你的博客-程序员秘密

技术标签: 小程序  

小程序通信:

父传子通信:
在pages/index/index.json里面有个usingComponents

{
    
  "usingComponents": {
    
    "组件的名字":"子组件的位置"// 例如../../components/com03/com03
  }
}

记住:com03后面没有.什么

在 .wxml里面引入

		  //需要传入的名字 ,记得加引号
<组件的名字 count=" {
     {数据}} "></组件的名字>

com03.json里面

  //接受子组件传来的数据
  properties: {
    
  	//上面传来的数据
    cound:{
    
      type:Number, //传过来的类型多类型可以用[,]
      value:0 //默认参数
    }
  },

子传父:
父 .wxml文件中

		  //自定义事件myevent,getcount是方法
<组件的名字 bind:myevent="getcount"></组件的名字>

父 .js文件中

定义方法getcount

//e是子组件传过来的数据
  getcount(e){
    
    console.log(e)
  },

子 .wxml文件中

	<button bindtap="getlist">点击</button>

子 . js文件中

	//通过triggerEvent进行发送,
    getlist(){
    
      //有需要可以在后面进行传参
      this.triggerEvent('myevent'{
    age:18})
    }

vantweapp模块安装:

官网网址

首先三个安装方式

通过 npm 安装

npm i @vant/weapp -S --production

通过 yarn 安装

yarn add @vant/weapp --production

安装 0.x 版本

npm i vant-weapp -S --production

第一步:

在这里插入图片描述
在微信开发者这里点击使用npm 模块

第二步:
安装vantweapp模块

yarn add @vant/weapp --production

完成两步后会得到一个
第三步
点击构造npm
在这里插入图片描述
使用方式:

在app.json或index.json中引入组件

"usingComponents": {
    
  "van-button": "@vant/weapp/button/index"
}

在.wxml文件中:

	<van-button type="default">默认按钮</van-button>
	<van-button type="primary">主要按钮</van-button>
	<van-button type="info">信息按钮</van-button>
	<van-button type="warning">警告按钮</van-button>
	<van-button type="danger">危险按钮</van-button>

slot插槽

父 .wxml

<my-com03 id="getcod">
  <view slot="top">我是顶部插槽</view>
  <view>你好,我想要找工作</view>
  <view slot="button">我是底部插槽</view>
</my-com03>
<button bindtap="bas">点击获取子组件数据</button>

子.wxml

<view>
  <slot name="top"></slot>
  <view>演示单个插槽的使用</view>
  <slot></slot> 
  <slot name="button"></slot>
</view>

如果父组件想要获取子组件的方法,给子组件身上放置一个id

通过selectComponent获取类似于vue的refs

父 .js

  bas(){
    
    var child = this.selectComponent('#getcod')
    console.log(child)
  },

数据监听observers

在.js里的component文件中

  data:{
    
	name:{
    
		names:'撒旦',
		id:‘1}
  }
  observers:{
    
  	//监听一个数据,监听谁就写谁
  	'num1':function(newnum){
    
  		console.log(newnum)
	 }
	 //可以同时监听两个或多个
    'num1 , num2':function(num1,num2){
    
      this.setData({
    
        num: num1+num2
      })
    },
    //如果多个需要监听name对象下面的所有属性可以使用   名.**
    'name.**' : function (newname) {
    
      console.log(newname)
    }
  },
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_48802343/article/details/116500210

智能推荐

Spring5-JdbcTemplate简要介绍_铁头娃撞碎南墙的博客-程序员秘密

文章目录1. 什么是JdbcTemplate2. 准备工作2.1 引入相关jar包2.2 配置数据库连接池2.3 配置JdbcTemplate对象2.4 创建Service与Dao层2.5 创建对应的JavaBean3. 使用JdbcTemplate实现对数据库的操作3.1 添加、修改、删除操作3.2 查询操作3.2.1 查询返回Scalar3.2.2 查询返回JavaBean3.2.3 查询返回集合3.3 批量操作1. 什么是JdbcTemplateSpring 框架对 JDBC 进行了封装,使用 J

Logback异步日志输出的使用_大树168的博客-程序员秘密

&lt;?xml version="1.0" encoding="UTF-8"?&gt;&lt;configuration scan="true" scanPeriod="60 seconds" debug="false"&gt; &lt;!--定义日志文件的存储地址 勿在 LogBack 的配置中使用相对路径 --&gt; &lt;property name="LOG_HOME" ...

粤嵌学习打卡第7天(工具类:获取图片、获取文件、过滤操作 )_(renderedimage)bi_qq_41986840的博客-程序员秘密

小伙伴们,在做项目中,我们常常会使用工具类减轻我们的代码量,让我们的项目更加的清晰明了!1、外部获取图片工具类 ImageUtils.java完整代码:import java.awt.Graphics;import java.awt.Image;import java.awt.image.BufferedImage;import java.awt.image.RenderedImag...

UITableView 的多余分割线的去除_YJLiOS的博客-程序员秘密

UITableView 的多余分割线的去除我们都知道UITableView在APP上的使用率是非常高的,但是有时候我们在一个页面上并不需要很多的cell 如图1所示那么多余的cell的分割线怎么去除就是一个让人头疼的问题 ,现在为大家提供一个非常简单的一行代码就可以搞定tableView.tableFooterView = [[UIView alloc] ini

随便推点

“无法定位程序输入点 OPENSSL_sk_new_reserve 于动态链接库 E:\ProgramData\Anaconda3\Library\bin\libssl-1_1-x64.dll上”_weixin_41596463的博客-程序员秘密

一、问题在使用conda创建虚拟环境的时候,一直报如下错误:无法定位程序输入点 OPENSSL_sk_new_reserve 于动态链接库Anaconda3\Library\bin\libssl-1_1-x64.dll上二、分析一般这个问题,都是因为Anaconda3\Library\bin\libssl-1_1-x64.dll,和Anaconda3\DLLs的中的libssl-1_1-x64.dll版本不一致导致的,三、解决办法(1)备份Anaconda3\Library\..

用kolla在容器里安装openstack_chengjuan6180的博客-程序员秘密

用kolla在docker容器里安装openstack github地址:https://github.com/greatbsky/kolla-for-openstack-in-docker OpenStack是一个开源的云计算管理平台项目,由几个主要的组件组合起来完成具体工作。Open...

Java基础_6 集合框架_可以睡觉但是没必要的博客-程序员秘密

1.集合框架多个元素组成一个单元的对象,在面向对象的编程语言中,数据都是通过对象携带的;存储多个对象:数组集合Collection(抽象类,没有下标)List:对象有序(取的顺序和存在数组中的位置有序)和重复的Arraylist(数组列表):有下标、底层实现为数组,查询快、增删慢list.add(new String("abc")); //添加复用类型list.ad...

线性二次型调节器LQR/LQC算法解析及求解器代码(matlab)_a15123408156的博客-程序员秘密

参考链接:http://120.52.51.14/stanford.edu/class/ee363/lectures/dlqr.pdf本文参考讲义中的第20页PPT,根据Hamilton-Jacobi方法,推导得到黎卡提方程的数值迭代求解方法(可实时在线求解黎卡提方程),具体推导过程请参考PPT。本文列出最后的结论及对应的matlab代码,其他编程语言也可参考贴出的代码自行改编。...

数据生成 -- 树_ramay7的博客-程序员秘密

生成一个nn个节点的树和n−1n-1条无向边(无边权),生成数据时需要注意无重边,无环,和所有节点编号都要在边的信息中出现。我是把最后一条边设为(n−1,n)(n-1,n),并且在之前保证这两个节点不连通。这个似乎破坏了一些随机性:)#include <stdio.h>#include <stdlib.h>#include <string.h>#include <math.h>#includ

Springboot 项目读取Resources目录下的文件_www.365codemall.com的博客-程序员秘密

需求描述:企业开发过程中,经常需要将一些静态文本数据放到Resources目录下,项目启动时或者程序运行中,需要读取这些文件。 读取Resources目录下文件的方法 /** * @Description: 读取resources 目录下的文件 * @Author: ljj * @CreateDate: 2020/11/3 17:20 * @UpdateUser: * @UpdateDate: * @UpdateReakem ...

推荐文章

热门文章

相关标签