$attrs 和 $listeners (vue2vue3)

news2024/12/23 22:16:12

目录

透传 Attributes

Attributes 继承​

对 class 和 style 的合并

v-on 监听器继承

深层组件继承 

禁用 Attributes 继承 

多根节点的 Attributes 继承 

vue2 $attrs 和 $listeners 

$attrs 概念说明

$attrs 案例

$listeners 概念说明

$listeners案例

 vue3 $attrs 和 $listeners 

 attrs在 template 中的用法

只有1个根元素的情况下

有2个根元素的情况下

$listeners  弃用

 attrs在 js 中的用法

Options API

Composition API 3.0的语法 

Composition API 3.2的语法 

总结

移除 $listeners 

概览

2.x 语法

3.x 语法

$attrs 包含 class & style 

概览

2.x 行为 

3.x 行为

（1）$props：当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。

（2）$attrs：包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。

（3）$listeners：包含了父作用域中(不含 .native 修饰器的)v-on事件监听器。他可以通过 v-on="listeners"传入内部组件

透传 Attributes

透传 Attributes 是指由父组件传入，且没有被子组件声明为 props 或是组件自定义事件的 attributes 和事件处理函数。

Attributes 继承​

“透传 attribute”指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。最常见的例子就是 class、style 和 id。

当一个组件以单个元素为根作渲染时，透传的 attribute 会自动被添加到根元素上。举例来说，假如我们有一个 <MyButton> 组件，它的模板长这样：

<!-- <MyButton> 的模板 -->
<button>click me</button>

一个父组件使用了这个组件，并且传入了 class：

<MyButton class="large" />

最后渲染出的 DOM 结果是：

<button class="large">click me</button>

 这里，<MyButton> 并没有将 class 声明为一个它所接受的 prop，所以 class 被视作透传 attribute，自动透传到了 <MyButton> 的根元素上。

对 class 和 style 的合并

如果一个子组件的根元素已经有了 class 或 style attribute，它会和从父组件上继承的值合并。如果我们将之前的 <MyButton> 组件的模板改成这样：

<!-- <MyButton> 的模板 -->
<button class="btn">click me</button>

 则最后渲染出的 DOM 结果会变成：

<button class="btn large">click me</button>

v-on 监听器继承

同样的规则也适用于 v-on 事件监听器

<MyButton @click="onClick" />

click 监听器会被添加到 <MyButton> 的根元素，即那个原生的 <button> 元素之上。当原生的 <button> 被点击，会触发父组件的 onClick 方法。同样的，如果原生 button 元素自身也通过 v-on 绑定了一个事件监听器，则这个监听器和从父组件继承的监听器都会被触发。

深层组件继承 

有些情况下一个组件会在根节点上渲染另一个组件。例如，我们重构一下 <MyButton>，让它在根节点上渲染 <BaseButton>：

<!-- <MyButton/> 的模板，只是渲染另一个组件 -->
<BaseButton />

此时 <MyButton> 接收的透传 attribute 会直接继续传给 <BaseButton>。

请注意：

  1. 透传的 attribute 不会包含 <MyButton> 上声明过的 props 或是针对 emits 声明事件的 v-on 侦听函数，换句话说，声明过的 props 和侦听函数被 <MyButton>“消费”了。

  2. 透传的 attribute 若符合声明，也可以作为 props 传入 <BaseButton>。

禁用 Attributes 继承 

如果你不想要一个组件自动地继承 attribute，你可以在组件选项中设置 inheritAttrs: false。

最常见的需要禁用 attribute 继承的场景就是 attribute 需要应用在根节点以外的其他元素上。通过设置 inheritAttrs 选项为 false，你可以完全控制透传进来的 attribute 被如何使用。

vue2 

Vue 2 的虚拟 DOM 实现对 class 和 style attribute 有一些特殊处理。因此，与其它所有 attribute 不一样，它们没有被包含在 $attrs 中。

上述行为在使用 inheritAttrs: false 时会产生副作用：

  • $attrs 中的 attribute 将不再被自动添加到根元素中，而是由开发者决定在哪添加。
  • 但是 class 和 style 不属于 $attrs，它们仍然会被应用到组件的根元素中：
<template>
  <label>
    <input type="text" v-bind="$attrs" />
  </label>
</template>
<script>
export default {
  inheritAttrs: false
}
</script>

vue3

从 3.3 开始你也可以直接在 <script setup> 中使用 defineOptions：

<script setup>
defineOptions({
  inheritAttrs: false
})
// ...setup 逻辑
</script>

这些透传进来的 attribute 可以在模板的表达式中直接用 $attrs 访问到。

<span>Fallthrough attribute: {{ $attrs }}</span>

这个 $attrs 对象包含了除组件所声明的 props 和 emits 之外的所有其他 attribute，例如 class，style，v-on 监听器等等。

有几点需要注意：

  • 和 props 有所不同，透传 attributes 在 JavaScript 中保留了它们原始的大小写，所以像 foo-bar 这样的一个 attribute 需要通过 $attrs['foo-bar'] 来访问。

  • 像 @click 这样的一个 v-on 事件监听器将在此对象下被暴露为一个函数 $attrs.onClick。

多根节点的 Attributes 继承 

和单根节点组件有所不同，有着多个根节点的组件没有自动 attribute 透传行为。如果 $attrs 没有被显式绑定，将会抛出一个运行时警告。

<CustomLayout id="custom-layout" @click="changeValue" />

如果 <CustomLayout> 有下面这样的多根节点模板，由于 Vue 不知道要将 attribute 透传到哪里，所以会抛出一个警告。

<header>...</header>
<main>...</main>
<footer>...</footer>

如果 $attrs 被显式绑定，则不会有警告：

<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>

vue2 $attrs 和 $listeners 

$attrs 概念说明

  • 包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)
  • $attrs 包含了传递给一个组件的 attribute 名和 attribute 值；即一个JSON对象
  • 可以通过v-bind="$attrs"传入内部组件


$attrs 案例

父组件

<template>
  <SlotContainer
    ref="slotContainer"
    name="huangbiao"
    :isOk="false"
    :option="{ a: 1, b: true, c: 'ddd' }"
  >
  </SlotContainer>
</template>

<script>
import SlotContainer from "./SlotContainer"

export default {
  data() {
    return {};
  },
  components: {
    SlotContainer,
  }
};
</script>

<style lang="scss" scoped></style>

子组件

<script>
export default {
  data() {
    return {};
  },
  props: {
    option: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  mounted() {
    console.log(this.$attrs);
  },
  methods: {}
};
</script>

结果

不注释掉子组件的props, $attrs的值

注释掉子组件的props, $attrs的值

inheritAttrs: false 和 $attrs ；配合使用解决的问题？ 

  1. 可以手动决定这些 attribute 会被赋予哪个元素
  2. inheritAttrs: false 选项不会影响 style 和 class 的绑定
  3. 这个模式允许你在使用基础组件的时候更像是使用原始的 HTML 元素，而不会担心哪个元素是真正的根元素

$listeners 概念说明

  • 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。
  • 可以配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素
  • 它是一个对象，里面包含了作用在这个组件上的所有监听器。

$listeners案例

<template>
  <div class>
    <SlotContainer
      ref="slotContainer"
      v-on:m1="m1"
      v-on:m2="m2"
      @m3="m3"
      @m4="m4"
      @click.native="testJiami"
    >
    </SlotContainer>
  </div>
</template>

<script>
import SlotContainer from "./SlotContainer";
import CryptoJS from "crypto-js";
export default {
  data() {
    return {};
  },
  components: {
    SlotContainer,
  },
  methods: {
    testJiami() {
      this.m1();
      this.m2();
      this.m3();
      this.m4();
    },
    m1() {
      console.log("加密结果一 MD5:" + CryptoJS.MD5("你好"));
      // 加盐 对应的API
      console.log("加密结果一 MD5:" + CryptoJS.HmacMD5("你好", "salt"));
      console.log(CryptoJS.SHA256("123456").toString());
      // 加盐 对应的API
      console.log(CryptoJS.HmacSHA256("123456", "salt").toString());
    },
    m2() {
      var pwd = "passwor";
      console.log("加密结果二 Hmac-MD5: " + CryptoJS.HmacMD5("你好", pwd));
    },
    m3() {
      var salt = CryptoJS.enc.Utf8.parse("salt"); //盐
      var iter = 1000; //迭代次数
      var mi = CryptoJS.PBKDF2("你好", salt, {
        keySize: parseInt(4),
        iterations: parseInt(iter),
      });

      console.log("加密结果三：" + mi);
    },
    m4() {
      var pswd = "我的密码";
      var mi = CryptoJS.AES.encrypt("你好", pswd);
      console.log("加密结果四" + mi);
      //解密
      var result = CryptoJS.AES.decrypt(mi, pswd).toString(CryptoJS.enc.Utf8);
      console.log("解密结果：" + result);
    },
  },
};
</script>

<style lang="scss" scoped></style>

子组件(SlotContainer.vue)

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    console.log(this.$listeners);
  },
  methods: {}
};
</script>

<style lang="scss" scoped></style>

结果

@click.native="testJiami"的方法没有在 $listeners中

 vue3 $attrs 和 $listeners 

简单来说， attrs 主要接收没在 props 里定义，但父组件又传过来的属性。

<!-- 父组件 ParentCom.vue -->
<template>
  <ChildCom
    msg="雷猴"
    data="123"
  />
</template>
 
<script setup>
import ChildCom from './ChildCom.vue'
</script>
 
 
 
<!-- 子组件 ChildCom.vue -->
<template>
  <div>
    {{ msg }} - {{ $attrs }}
  </div>
</template>
 
<script setup>
defineProps({
  msg: {
    type: String
  }
})
</script>

可以看到，在子组件中，msg 使用了 props 接收，所以 {{ msg }} 可以直接输出 props 里接收的内容。

而没在 props 里接收的内容，全部都放到了 $attrs 里，并且存在一个对象里面。

接下来将展开讲解不同情况下 attrs 的使用方法。

 attrs在 template 中的用法

在前面简单的例子里其实已经大概知道 attrs 在 template 的用法。但 Vue3 中 template 不再要求只有一个根元素了。所以 attrs 在 template 中分2种情况使用。

只有1个根元素的情况下

只有1个根元素的情况下，子组件中，没被 props 接收的属性，都会绑定在根元素上。

<!-- 父组件 ParentCom.vue -->
<template>
  <ChildCom
    msg="雷猴"
    data="123"
    name="鲨鱼辣椒"
    style="color: red;"
  />
</template>
 
<script setup>
import ChildCom from './ChildCom.vue'
</script>
 
 
 
<!-- 子组件 ChildCom.vue -->
<template>
  <div>
    {{ msg }}
  </div>
</template>
 
<script setup>
defineProps({
  msg: {
    type: String
  }
})
</script>

可以看到，没被 props 接收的属性都被绑定到根元素上了。

连 style 里传入的样式也被执行，文字变成红色了。

有2个根元素的情况下

当子组件有2个根元素时，没被 props 接收的属性不会绑定到子组件的元素上。

<!-- 父组件 ParentCom.vue -->
<template>
  <ChildCom
    msg="雷猴"
    data="123"
    name="鲨鱼辣椒"
    style="color: red;"
  />
</template>
 
<script setup>
import ChildCom from './ChildCom.vue'
</script>
 
 
 
<!-- 子组件 ChildCom.vue -->
<template>
  <div>
    {{ msg }}
  </div>
  <div>
    {{ msg }}
  </div>
</template>
 
<script setup>
defineProps({
  msg: {
    type: String
  }
})
</script>

 

此时连父组件传入是 style 样式都不生效了。

如果我们此时希望第二个元素绑定所有没被 props 接收的属性，可以使用 v-bind="$attrs" 的方法实现

<!-- 父组件 ParentCom.vue -->
<template>
  <ChildCom
    msg="雷猴"
    data="123"
    name="鲨鱼辣椒"
    style="color: red;"
  />
</template>
 
<script setup>
import ChildCom from './ChildCom.vue'
</script>
 
 
 
<!-- 子组件 ChildCom.vue -->
<template>
  <div>
    {{ msg }}
  </div>
  <div v-bind="$attrs">
    {{ msg }}
  </div>
</template>
 
<script setup>
defineProps({
  msg: {
    type: String
  }
})
</script>

 

$listeners  弃用

$listeners 对象在 Vue 3 中已被移除。事件监听器现在是 $attrs 的一部分：

{
  text: '这是一个 attribute',
  onClose: () => console.log('close 事件被触发')
}

 attrs在 js 中的用法

除了在 template 中可以访问到 $attrs ，在 JS 中也可以访问到。

vue 3 其实是兼容大部分 Vue 2 语法的，也就是 Options API 。而 attrs 在 Options APi 和 Composition Api 中的使用方法会稍微有一丢丢区别。而 Composition API 又分为 Vue 3.2 前的语法和 3.2 后的语法。

接下来将分开讨论这3种情况。

Options API

<!-- 父组件 ParentCom.vue -->
<template>
  <ChildCom
    msg="雷猴"
    data="123"
    name="鲨鱼辣椒"
    style="color: red;"
  />
</template>
 
<script setup>
import ChildCom from './ChildCom.vue'
</script>
 
 
 
<!-- 子组件 ChildCom.vue 暂不关注 template 部分 -->
<script>
export default {
  props: {
    msg: {
      type: String
    }
  },
  mounted() {
    console.log(this.$attrs)
  }
}
</script>

此时控制台会输出没被 props 接收的属性。 

Composition API 3.0的语法 

<!-- 父组件 ParentCom.vue -->
<template>
  <ChildCom
    msg="雷猴"
    data="123"
    name="鲨鱼辣椒"
    style="color: red;"
  />
</template>
 
<script setup>
import ChildCom from './ChildCom.vue'
</script>
 
 
 
<!-- 子组件 ChildCom.vue 暂不关注 template 部分 -->
<script>
export default {
  props: {
    msg: {
      type: String
    }
  },
  setup(props, context) {
    console.log('props: ', props)
    console.log('attrs: ', context.attrs)
  }
}
</script>

Vue 3.2 前的写法，需要在 setup 方法里接收2个参数，而 attrs 就在 context 参数里。

Composition API 3.2的语法 

Vue 3.2 后的语法，可以在 <script> 标签上添加 setup 属性。所以在代码里就不需要再调用 setup 方法了。

在这种情况下，props 成了默认的全局方法，而 attrs 则需要另外引入。

<!-- 父组件 ParentCom.vue -->
<template>
  <ChildCom
    msg="雷猴"
    data="123"
    name="鲨鱼辣椒"
    style="color: red;"
  />
</template>
 
<script setup>
import ChildCom from './ChildCom.vue'
</script>
 
 
 
<!-- 子组件 ChildCom.vue 暂不关注 template 部分 -->
<script setup>
import { useAttrs } from 'vue'
 
const props = defineProps({
  msg: {
    type: String
  }
})
 
const attrs = useAttrs()
 
console.log('props: ', props)
console.log('attrs: ', attrs)
</script>

需要引入 vue 中的 useAttrs ，在调用 useAttrs 后会返回当前未被 props 接收的属性。

重点是以下两句。

import { useAttrs } from 'vue'
const attrs = useAttrs()

总结

移除 $listeners 

概览

$listeners 对象在 Vue 3 中已被移除。事件监听器现在是 $attrs 的一部分：

{
  text: '这是一个 attribute',
  onClose: () => console.log('close 事件被触发')
}

2.x 语法

在 Vue 2 中，你可以通过 this.$attrs 访问传递给组件的 attribute，以及通过 this.$listeners 访问传递给组件的事件监听器。结合 inheritAttrs: false，开发者可以将这些 attribute 和监听器应用到根元素之外的其它元素：

<template>
  <label>
    <input type="text" v-bind="$attrs" v-on="$listeners" />
  </label>
</template>
<script>
  export default {
    inheritAttrs: false
  }
</script>

3.x 语法

在 Vue 3 的虚拟 DOM 中，事件监听器现在只是以 on 为前缀的 attribute，这样它就成为了 $attrs 对象的一部分，因此 $listeners 被移除了。

<template>
  <label>
    <input type="text" v-bind="$attrs" />
  </label>
</template>
<script>
export default {
  inheritAttrs: false
}
</script>

如果这个组件接收一个 id attribute 和一个 v-on:close 监听器，那么 $attrs 对象现在将如下所示:

{
  id: 'my-input',
  onClose: () => console.log('close 事件被触发')
}

$attrs 包含 class & style 

概览

$attrs 现在包含了所有传递给组件的 attribute，包括 class 和 style。

2.x 行为 

Vue 2 的虚拟 DOM 实现对 class 和 style attribute 有一些特殊处理。因此，与其它所有 attribute 不一样，它们没有被包含在 $attrs 中。

上述行为在使用 inheritAttrs: false 时会产生副作用：

  • $attrs 中的 attribute 将不再被自动添加到根元素中，而是由开发者决定在哪添加。
  • 但是 class 和 style 不属于 $attrs，它们仍然会被应用到组件的根元素中：
<template>
  <label>
    <input type="text" v-bind="$attrs" />
  </label>
</template>
<script>
export default {
  inheritAttrs: false
}
</script>

像这样使用时：

<my-component id="my-id" class="my-class"></my-component>

……将生成以下 HTML：

<label class="my-class">
  <input type="text" id="my-id" />
</label>

3.x 行为

$attrs 包含了所有的 attribute，这使得把它们全部应用到另一个元素上变得更加容易了。现在上面的示例将生成以下 HTML：

<label>
  <input type="text" id="my-id" class="my-class" />
</label>

在使用了 inheritAttrs: false 的组件中，请确保样式仍然符合预期。如果你之前依赖了 class 和 style 的特殊行为，那么一些视觉效果可能会遭到破坏，因为这些 attribute 现在可能被应用到了另一个元素中。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

大数据学习（1）-Hadoop

大数据学习（1）-Hadoop

&&大数据学习&& &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 承认自己的无知&#xff0c;乃是开启智慧的大门 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4dd;支持一下博>主哦&#x…
阅读更多...
Agilent安捷伦3458A八位半万用表

Agilent安捷伦3458A八位半万用表

Agilent 3458A突破了生产测试&#xff0c;科研与开发及校准实验室在速度与精度上长时期的性能 壁垒&#xff0c;是惠普公司提供的快速&#xff0c;灵活且精确的多用表。在你的系统中或工作台上&#xff0c; 3458A以空前的测试系统吞吐量和精度、七种功能的测量灵活性&#xff0…
阅读更多...
Ubuntu 18.04 OpenCV3.4.5 + OpenCV3.4.5 Contrib 编译

Ubuntu 18.04 OpenCV3.4.5 + OpenCV3.4.5 Contrib 编译

目录 1 依赖安装 2 下载opencv3.4.5及opencv3.4.5 contrib版本 3 编译opencv3.4.5 opencv3.4.5_contrib及遇到的问题 1 依赖安装 首先安装编译工具CMake&#xff0c;命令安装即可&#xff1a; sudo apt install cmake 安装Eigen&#xff1a; sudo apt-get install libeigen3-…
阅读更多...
解决Mysql8.0不存在mysql.proc表

解决Mysql8.0不存在mysql.proc表

摘自MySQL8.0官方文档&#xff1a; The parameters and routines data dictionary tables together supersede the proc table from before MySQL 8.0. 大概意思说&#xff0c;在mysql database中parameters表和routines数据字典表一起取代了MySQL 8.0之前的proc表。 MySQL 8.0…
阅读更多...
前端uniapp生成海报并保存相册

前端uniapp生成海报并保存相册

uiapp插件 目录 图片qrcode.vue源码完整版封装源码qrcodeSwiper.vue最后 图片 qrcode.vue源码完整版 <template><view class"qrcode"><div class"qrcode_swiper SourceHanSansSC-Normal"><!-- <cc-scroolCard :dataInfo"dat…
阅读更多...
巧用excel实现试卷向表格的转换

巧用excel实现试卷向表格的转换

MID($E$10,FIND(D14,$E$10,1),FIND(D15,$E$10,1)-FIND(D14,$E$10,1)) MID($E$10,FIND(D15,$E$10,1),FIND(D16,$E$10,1)-FIND(D15,$E$10,1)) 中华人民共和国司法部
阅读更多...
1130 - Host ‘192.168.10.10‘ is not allowed to connect to this MysOL server

1130 - Host ‘192.168.10.10‘ is not allowed to connect to this MysOL server

mysql 远程登录报错误信息&#xff1a;1130 - Host 124.114.155.70 is not allowed to connect to this MysOL server //需要在mysql 数据库目录下修改 use mysql; //更改用户的登录主机为所有主机&#xff0c;%代表所有主机 update user set host% where userroot; //刷新权…
阅读更多...
nginx与tomcat绑定联合工作配置实例（内容来自网上，学习笔记，仅供交流学习使用无商业目的，如有侵权，通知我立马删除)

nginx与tomcat绑定联合工作配置实例（内容来自网上，学习笔记，仅供交流学习使用无商业目的，如有侵权，通知我立马删除)

阅读更多...
uni-app 实现考勤打卡功能

uni-app 实现考勤打卡功能

一、在页面中引入地图组件 <map id"map" style"width: 100%; height: 100%" :latitude"myLatitude" :longitude"myLongitude" :circles"circles" :markers"markers"> </map>属性名类型说明longitudeN…
阅读更多...
IDEA自定义代码快捷指令

IDEA自定义代码快捷指令

在IDEA中&#xff0c;有很多默认的代码快捷指令&#xff0c;例如输出&#xff08;sout&#xff09;、main方法&#xff08;psvm&#xff09;等&#xff0c;有时候&#xff0c;我们也需要自定义一些常用的代码片段&#xff0c;例如执行时间打印等&#xff0c;这时候&#xff0c;…
阅读更多...
阿桂天山的技术小结:Flask对Ztree树节点搜索定位

阿桂天山的技术小结:Flask对Ztree树节点搜索定位

话不多说,上图上源码 1.先看效果图 2.前端页面部分: 1)页面 <!DOCTYPE html> <HTML><HEAD><TITLE>Ewangda 阿桂天山的Ztree实战</TITLE><meta http-equiv"content-type" content"text/html; charsetUTF-8"><link…
阅读更多...
vue脚手架项目创建及整理

vue脚手架项目创建及整理

环境准备 首先安装node,如果项目需要指定node版本 可以按装nvm控制版本 创建vue vue create 项目名选择对应版本 这边我是选的自定义&#xff0c;就是第三个选项&#xff0c;可以提前给我下好 router vuex什么的&#xff08;空格&#xff09; 选项如图标注 等待下载所需的…
阅读更多...
什么是Spring

什么是Spring

一、前言 参与java项目开发的工作&#xff0c;没有人可以离开Spring&#xff0c;但是什么是Spring呢&#xff1f;我们平时可以说对于这个概念早已经是熟视无睹。今天我还特意查看了官网的介绍&#xff0c;但是上面竟然没有说明Spring是什么&#xff0c;之说了Spring的特征和能…
阅读更多...
这道面试题工作中经常碰到，但 99% 的程序员都答不上来

这道面试题工作中经常碰到，但 99% 的程序员都答不上来

小时候都被问过一个脑筋急转弯&#xff0c;把大象放进冰箱有几个步骤&#xff1f;我们一开始都会抓耳挠腮&#xff0c;去想着该如何把大象塞进冰箱。最终揭晓的答案却根本不关心具体的操作方法&#xff0c;只是提供了 3 个步骤组成的流程&#xff0c;「把冰箱打开&#xff0c;把…
阅读更多...
MQTT服务器源码解析

MQTT服务器源码解析

目录 1、关于header问题 2、MQTT 连接参数的使用 2.1连接地址 2.2 基于 TCP 的 MQTT 连接 2.3 基于 WebSocket 的连接 3、订阅topic 4、推送消息给订阅者 5、QOS 机制 5.1 QOS是什么 5.2 QOS的实现原理 5.3 发送流程 6、reatain机制 总结&#xff1a;给还没上线的…
阅读更多...
节日灯饰灯串灯出口欧洲CE认证检测

节日灯饰灯串灯出口欧洲CE认证检测

灯串&#xff08;灯带&#xff09;&#xff0c;这个产品的形状就象一根带子一样&#xff0c;再加上产品的主要原件就是LED&#xff0c;因此叫做灯串或者灯带。2022年&#xff0c;我国灯具及相关配件产品出口总额超过460亿美元。其中北美是最大的出口市场。其次是欧洲市场&#…
阅读更多...
传奇开服教程GOM传奇引擎外网全套架设教程

传奇开服教程GOM传奇引擎外网全套架设教程

传奇开服教程&#xff1a;GOM引擎外网架设教程 准备工具&#xff1a;版本&#xff0c;DBC数据库&#xff0c;传奇客户端&#xff0c;服务器&#xff0c;备案域名 架设传奇外网GOM引擎版本之前我们连接登录服务器&#xff0c;我们把版本&#xff0c;DBC数据库&#xff0c;传奇…
阅读更多...
会议邀请 | 思腾合力邀您共赴PRCV 2023第六届中国模式识别与计算机视觉大会

会议邀请 | 思腾合力邀您共赴PRCV 2023第六届中国模式识别与计算机视觉大会

第六届中国模式识别与计算机视觉大会&#xff08;The 6th Chinese Conference on Pattern Recognition and Computer Vision, PRCV 2023&#xff09;将于2023年10月13日至15日在厦门举办。PRCV 2023由中国计算机学会&#xff08;CCF&#xff09;、中国自动化学会&#xff08;CA…
阅读更多...
Java8实战-总结38

Java8实战-总结38

Java8实战-总结38 默认方法概述默认方法默认方法的使用模式可选方法行为的多继承 默认方法 概述默认方法 默认方法是Java 8中引入的一个新特性&#xff0c;希望能借此以兼容的方式改进API。现在&#xff0c;接口包含的方法签名在它的实现类中也可以不提供实现。缺失的方法实现…
阅读更多...
静电除尘器的工作原理及使用说明

静电除尘器的工作原理及使用说明

静电除尘器是一种通过静电场将空气中的颗粒物带电并吸附到电极上&#xff0c;再利用机械振打或气流将颗粒物从电极上清除的空气净化设备。以下是静电除尘器的工作原理及使用说明&#xff1a; 工作原理&#xff1a; 静电除尘器主要由电极系统、电源系统、收尘系统、清灰系统等…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023