黑马程序员微信小程序学习总结9.插槽(slot)、父子组件中的通信的3种方式和自定义组件behaviors

目录

  • 自定义组件中:插槽(slot)
  • 自定义组件中:父子组件中的通信的3种方式
    • 属性绑定(总结7讲过)
    • 事件绑定(子向父传参)
    • 获取组件实例
  • 自定义组件behaviors
    • 同名字段的覆盖和组合规则(了解)

自定义组件中:插槽(slot)

在这里插入图片描述

简单来说就是组件调用页面可以通过插槽向组件的slot节点中填充标签

在这里插入图片描述
可能有点抽象看下面例子:
新建test4组件:
在这里插入图片描述
添加到全局组件:
在这里插入图片描述
在页面中调用:
在这里插入图片描述
显示结果:
在这里插入图片描述

默认情况下只能使用单个slot
想要使用多个slot节点,需要在options中设置multipleSlots为true
多个插槽的用法如下:
在组件中:
在这里插入图片描述
在调用页面中:
在这里插入图片描述

自定义组件中:父子组件中的通信的3种方式

在这里插入图片描述

属性绑定(总结7讲过)

在这里插入图片描述
例子:
新建test5组件
在这里插入图片描述
在这里插入图片描述
调用组件的页面:
在这里插入图片描述
在这里插入图片描述
效果图:
在这里插入图片描述
父组件变化,子组件跟着变化(反之就需要事件绑定)

虽然属性和data没有本质区别,但是无法传递data,因为标签中为属性

事件绑定(子向父传参)

在上一个例子中,如果在自组件添加自增按钮,参数不会传递到父组件,这是时候就需要使用事件绑定
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

具体看下面例子:
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

效果图:
在这里插入图片描述
增加子组件后,父组件也增加了。

获取组件实例

在这里插入图片描述
比较简单,就是获取组件实例,调用组件中的方法进而改变组件样式,数据等

自定义组件behaviors

类似于一个java类
在这里插入图片描述
在这里插入图片描述
如:
在这里插入图片描述
在这里插入图片描述
在调用页面的wxml页面就可以使用
在这里插入图片描述

behaviors中所有可用的节点
在这里插入图片描述

同名字段的覆盖和组合规则(了解)

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/394674.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Kotlin基础——泛型

泛型类型参数 编译器一般可以推导出类型实参 若创建空的list&#xff0c;则需要显示指定类型实参&#xff0c;可以用如下两种方式 val name: MutableList<String> mutableListOf()val name2 mutableListOf<String>()泛型函数 public fun <T> List<T&…

宝塔安装MySQL、设置MySQL密码、设置navicat连接

1、登录宝塔面板进行安装 2、设置MySQL连接密码 3、安装好了设置navicat连接 登录MySQL [roothecs-394544 ~]# mysql -uroot -p Enter password: 切换到MySQL数据 mysql> use mysql Database changed mysql> 查询用户信息 mysql> select host,user from user; ---…

生信学院|02月23日《ECAD数据到MCAD模型》

课程主题&#xff1a;ECAD数据到MCAD模型 课程时间&#xff1a;2024年02月23日 14:00-14:30 主讲人&#xff1a;陈冬冬 生信科技 售后服务工程师 CircuitWorks概述CircuitWorks工具栏&#xff1b;零部件库和属性信息&#xff1b;对ECAD数据的基本操作&#xff1b;将装配体输…

绝地求生:pubg全年活动整理

2023年整理&#xff0c;2024展望。2023年1月是4神兽&#xff0c;24年2月是西游&#xff0c;25年1月呢&#xff1f; 2023新3月4神兽结束后是AUG黑箱和6周年。 2024年3月也会出成长型武器黑箱和7周年。 4月&#xff1a;新通行证、战队联名、服装套装。 5月&#xff1a;是一些套装…

学习Android的第十六天

目录 Android 自定义 Adapter Adapter 接口 SpinnerAdapter ListAdapter BaseAdapter 自定义 BaseAdapter 参考文档 Android ListView 列表控件 ListView 的属性和方法 表头表尾分割线的设置 列表从底部开始显示 android:stackFromBottom 设置点击颜色 cacheColorH…

基于Java SSM框架实现精准扶贫管理系统项目【项目源码】计算机毕业设计

基于java的SSM框架实现精准扶贫管理系统演示 JSP技术介绍 JSP技术本身是一种脚本语言&#xff0c;但它的功能是十分强大的&#xff0c;因为它可以使用所有的JAVA类。当它与JavaBeans 类进行结合时&#xff0c;它可以使显示逻辑和内容分开&#xff0c;这就极大的方便了用户的需…

【HarmonyOS】鸿蒙开发之Slider组件——第3.5章

组件应用场景: 设备音量大小&#xff0c;调节屏幕亮度等需求 slider组件内options属性简介 value&#xff1a;滑动条当前进度值。 min&#xff1a;设置滑动条设置最小值。 max&#xff1a;设置滑动条设置最大值&#xff0c;默认为 100 。 step&#xff1a;设置滑动条滑动跳动…

遨博I20协作臂关节逆解组Matlab可视化

AUBO I20协作臂关节逆解组Matlab可视化 前言1、RTB使用注意点2、代码与效果2.1、完整代码2.2、运行效果 总结 前言 注意&#xff1a;请预先配置好Matlab和RTB机器人工具箱环境&#xff0c;本文使用matlab2022b和RTB10.04版本 工作需要&#xff0c;使用matlab实现对六轴机械臂…

初识 Rust 语言

目录 前言一、Rust 的背景二、Rust的特性三、部署开发环境&#xff0c;编写一个简单demo1、在ubuntu 20.04部署环境2、编写demo测试 四、如何看待Linux内核引入Rust 前言 自Linux 6.1起&#xff0c;初始的Rust基础设施被添加到Linux内核中。此后为了使内核驱动程序能够用Rust编…

Vue3+vite搭建基础架构(6)--- 使用vue-router

Vue3vite搭建基础架构&#xff08;6&#xff09;--- 使用vue-router 说明官方文档安装vue-router使用vue-router测试vue-router 说明 这里记录下自己在Vue3vite的项目使用vue-router的过程&#xff0c;不使用ts语法&#xff0c;方便以后直接使用。这里承接自己的博客Vue3vite搭…

在SpringBoot中@PathVariable与@RequestParam的区别

PathVariable GetMapping("/{userId}")public R<User> getUserById(PathVariable Long userId) {return userService.getUserById(userId);} // 根据id获取一条数据 function getStudentDataByIdAndDisplayInput(id) {// 发送 AJAX 请求$.ajax({url: /dorm/st…

基于JavaWeb开发的小区车辆登记系统计算机毕设[附源码]

基于JavaWeb开发的小区车辆登记系统计算机毕设[附源码] &#x1f345; 作者主页 央顺技术团队 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; &#x1f345; 文末获取源码联系方式 &#x1f4dd; &#x1f345; 查看下方微信号获取联系方式 承接各种定制系统…

Linux环境安装Maven(详细图文)

目录 摘要 一、准备工作 1.检查当前环境是否安装maven 2.下载maven ​3.上传maven压缩包 4.解压maven包 5.移动到/usr/local目录下方便管理 6.配置maven环境变量 7.刷新配置文件 8.配置maven镜像仓库 9.验证是否成功 摘要 笔者Linux环境为&#xff1a;Ubuntu 22.04 …

安装部署k8s集群

系统&#xff1a; CentOS Linux release 7.9.2009 (Core) 准备3台主机 192.168.44.148k8s-master92.168.44.154k8s-worker01192.168.44.155k8s-worker02 3台主机准备工作 关闭防火墙和selinux systemctl disable firewalld --nowsetenforce 0sed -i s/SELINUXenforcing/SELI…

MySQL进阶45讲【22】MySQL是怎么保证数据不丢的?

1 前言 今天这篇文章&#xff0c;继续介绍在业务高峰期临时提升性能的方法。从文章标题“MySQL是怎么保证数据不丢的&#xff1f;”&#xff0c;就可以看出来&#xff0c;今天介绍的方法&#xff0c;跟数据的可靠性有关。 在专栏前面文章中&#xff0c;着重介绍了WAL机制&…

软考学习--计算机组成原理与体系结构

计算机组成原理与体系结构 数据的表示 进制转换 R 进制转换为 10 进制–按权展开法 10进制转换为2进制 原码 反码 补码 移码 原码 &#xff1a;数字的二进制表示反码 &#xff1a; 正数的反码等于原码&#xff0c;负数的反码等于原码取反补码&#xff1a; 正数的补码等…

python使用工厂模式和策略模式实现读文件、分析内容功能

当涉及到在 Python 中创建类以及使用设计模式来实现读取文件和分析内容的功能时&#xff0c;我们可以考虑使用工厂模式和策略模式的结合。下面是一个简单的示例&#xff0c;演示如何通过创建类和使用设计模式来实现这一功能&#xff1a; # 工厂模式&#xff1a;根据不同的分析…

qwen1.5 chat vllm推理使用案例

参考:https://github.com/QwenLM/Qwen1.5 下载:https://huggingface.co/collections/Qwen/qwen15-65c0a2f577b1ecb76d786524 下载可以参考huggingface-cli 命令下载使用:https://blog.csdn.net/weixin_42357472/article/details/1326636931、vllm运行 显卡驱动:NVIDIA-S…

java数据结构与算法刷题-----LeetCode239. 滑动窗口最大值

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 1. 法一&#xff1a;指针法 解题思路 我们以每一个窗口来看&#xff0c;找…

Linux+Win双系统远程重启到Win

背景 电脑安装了双系统&#xff08;ubuntu 22.04 win11&#xff09;&#xff0c;默认进入ubuntu系统。给电脑设置了WoL(Wake-on-LAN)&#xff0c;方便远程开机远程控制。 但是ubuntu的引导程序grub无法远程控制&#xff0c;远程开机会默认进入ubuntu。 虽然说可以进入ubuntu后…
最新文章