【前端高频面试题--Vue组件通信篇】

news2024/11/27 11:30:35 
🚀 作者 ：“码上有前”
🚀 文章简介 ：前端高频面试题
🚀 欢迎小伙伴们 点赞👍、收藏⭐、留言💬

前端高频面试题--Vue组件通信篇

  • 往期精彩内容
  • Vue与VueComponent的关系
  • props / $emit
  • 父子组件传值
  • 父子组件传值案例
  • EventBus事件总线
  • 依赖注入（provide / inject）
  • ref / $refs
  • $parent / $children
  • $attrs / $listeners
  • 总结

往期精彩内容

【前端高频面试题–HTML篇】
【前端高频面试题–CSS上篇】
【前端高频面试题–CSS下篇】
【前端高频面试题–JS上篇】
【前端高频面试题–JS下篇】
【前端高频面试题–ES6篇】
【前端高频面试题–ES7-ES11】
【前端–异步编程】
【前端高频面试题–TypeScript篇】

【前端高频面试题–git篇】
【前端高频面试题–微信小程序篇】

【前端高频面试题–Vue基础篇】
【前端高频面试题–虚拟DOM篇】
【前端高频面试题–Vue3.0篇】
【前端高频面试题–Vuex上篇】
【前端高频面试题–Vuex下篇】
【前端高频面试题–Vue生命周期篇】
【前端高频面试题–Vue组件通信篇】
【前端高频面试题–Vue路由篇】

【前端-Vue3创建一个新项目】
【前端大屏自适应缩放】
【前端Vue3 + TS项目开发一般流程】

Vue与VueComponent的关系

在这里插入图片描述
在Vue.js中，Vue是一个用于构建用户界面的JavaScript框架，而Vue组件（Vue Component）是构成Vue应用程序的基本构建块。

Vue组件是可复用的代码模块，它封装了一部分具有相关功能和样式的HTML、CSS和JavaScript代码。每个Vue组件都有自己的模板（template）、数据（data）、方法（methods）、计算属性（computed）、生命周期钩子（lifecycle hooks）等。

Vue组件可以通过Vue实例进行渲染和使用。在Vue应用程序中，可以创建多个Vue组件，然后将它们组合在一起形成一个完整的应用程序。

Vue实例是Vue的根实例，它是一个Vue组件的顶层容器。Vue实例通过指定要渲染的根组件来启动Vue应用程序。根组件可以包含其他子组件，并且它们可以通过组件之间的数据传递和事件通信来交互。

简而言之，Vue是整个框架，而Vue组件是构成Vue应用程序的可重用模块。Vue实例是Vue应用程序的根实例，用于启动和管理Vue组件。

props / $emit

props 和 $emit 是 Vue.js 中用于实现父子组件通信的两个关键概念。

Props：
Props 是一种从父组件向子组件传递数据的机制。父组件可以通过在子组件上定义属性（props），将数据传递给子组件。子组件接收到 props 后，可以在其模板中直接使用这些属性的值。

具体步骤如下：

  1. 在父组件中，通过在子组件上使用 v-bind 或简写的冒号语法，将数据绑定到子组件的属性上。例如：<child-component :prop-name="dataValue"></child-component>。
  2. 在子组件中，通过在组件选项中定义 props 属性来声明需要接收的属性。例如：props: ['propName']。
  3. 子组件在接收到父组件传递的属性后，可以直接在模板中使用这些属性的值。例如：<p>{{ propName }}</p>。

Props 具有单向数据流的特性，父组件通过 props 向子组件传递数据，而子组件不能直接修改 props 的值。如果需要子组件修改父组件的数据，可以使用 $emit。

** e m i t ∗ ∗ ： ‘ emit**： ` emit∗∗：‘emit是 Vue.js 实例提供的方法，用于触发自定义事件。通过$emit`，子组件可以向父组件发送消息或数据，实现子组件向父组件通信。

具体步骤如下：

  1. 在子组件中，使用 this.$emit 方法触发一个自定义事件，并传递需要发送的数据。例如：this.$emit('custom-event', eventData)。
  2. 在父组件中，通过在子组件上使用 v-on 或简写的@ 符号语法，监听子组件触发的事件，并在相应的处理函数中处理接收到的数据。例如：<child-component @custom-event="handleEvent"></child-component>。
  3. 在父组件中定义处理事件的方法 handleEvent，该方法会在子组件触发事件时被调用，并接收到子组件传递的数据。

通过这种方式，子组件可以将需要与父组件共享的数据通过自定义事件的方式传递给父组件，实现了子组件向父组件通信的目的。

总结：
Props 是一种父组件向子组件传递数据的机制，而 $emit 是一种子组件向父组件发送消息或数据的机制。通过这两种机制，父子组件可以实现双向的通信，实现了组件之间的数据交互和共享。

父子组件传值

在 Vue.js 中，父组件向子组件传递值可以使用 props，而子组件向父组件传递值可以使用 $emit。

  1. 父组件向子组件传递值（使用 props）：

    • 在父组件中，通过在子组件上使用 v-bind 或简写的冒号语法，将数据绑定到子组件的属性上。例如：<child-component :prop-name="dataValue"></child-component>。
    • 在子组件中，通过在组件选项中定义 props 属性来声明需要接收的属性。例如：props: ['propName']。
    • 子组件可以直接在模板中使用通过 props 传递的值。例如：<p>{{ propName }}</p>。

  2. 子组件向父组件传递值（使用 $emit）：

    • 在子组件中，使用 this.$emit 方法触发一个自定义事件，并传递需要发送的数据。例如：this.$emit('custom-event', eventData)。
    • 在父组件中，通过在子组件上使用 v-on 或简写的 @ 符号语法，监听子组件触发的事件，并在相应的处理函数中处理接收到的数据。例如：<child-component @custom-event="handleEvent"></child-component>。
    • 在父组件中定义处理事件的方法 handleEvent，该方法会在子组件触发事件时被调用，并接收到子组件传递的数据。

这样，就可以在父子组件之间实现数据的传递和通信。父组件通过 props 将数据传递给子组件，子组件接收并使用这些值。而子组件通过 $emit 触发自定义事件，并将需要传递的数据发送给父组件，父组件监听并处理这些事件，获取子组件传递的值。

需要注意的是，在父子组件之间传递数据时，数据的类型和命名需要保持一致，以确保正确的数据传递和使用。

父子组件传值案例

当涉及到父子组件之间的数据传递时，一个常见的案例是一个待办事项列表（Todo List）。假设我们有一个父组件 TodoList 和一个子组件 TodoItem，我们希望通过父组件向子组件传递每个待办事项的数据。

以下是一个简单的父子组件传值的案例：

<!-- 父组件 TodoList -->
<template>
  <div>
    <h2>Todo List</h2>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <!-- 通过 props 传递数据给子组件 -->
        <todo-item :todo="todo"></todo-item>
      </li>
    </ul>
  </div>
</template>

<script>
import TodoItem from './TodoItem.vue';

export default {
  components: {
    TodoItem
  },
  data() {
    return {
      todos: [
        { id: 1, text: 'Buy groceries' },
        { id: 2, text: 'Clean the house' },
        { id: 3, text: 'Go for a run' }
      ]
    };
  }
};
</script>

<!-- 子组件 TodoItem -->
<template>
  <div>
    <!-- 使用通过 props 接收的数据 -->
    <span>{{ todo.text }}</span>
    <button @click="completeTodo">Complete</button>
  </div>
</template>

<script>
export default {
  props: {
    // 声明父组件传递的属性
    todo: {
      type: Object,
      required: true
    }
  },
  methods: {
    completeTodo() {
      // 子组件向父组件传递数据
      this.$emit('todo-completed', this.todo.id);
    }
  }
};
</script>

在上述案例中，父组件 TodoList 中的 todos 数组包含了待办事项的数据。通过使用 v-for 遍历数组，在每个 TodoItem 子组件上使用 prop todo 将每个待办事项的对象传递给子组件。

在子组件 TodoItem 中，通过定义 props 并接收 todo 属性，可以在子组件中访问父组件传递的待办事项对象。子组件还定义了 completeTodo 方法，当用户点击 “Complete” 按钮时，子组件触发了一个自定义事件 todo-completed 并传递了待办事项的 id 值，以便父组件进行相应的处理。

父组件监听 TodoItem 子组件触发的 todo-completed 事件，并在相应的处理函数中获取子组件传递的 id 值，从而实现父子组件之间的数据传递和通信。

EventBus事件总线

EventBus（事件总线）是一种在 Vue.js 中实现组件间通信的机制。它可以用于跨组件传递事件和数据，包括父子组件、兄弟组件或任意组件之间的通信。

EventBus 是一个 Vue 实例，它充当中央事件处理器，用于将事件发送到一个组件，然后由其他组件监听和接收这些事件。

以下是使用 EventBus 实现组件间通信的基本步骤：

  1. 创建 EventBus 实例：

    // event-bus.js
import Vue from 'vue';
export const eventBus = new Vue();

  2. 在发送组件中发送事件：

    // SenderComponent.vue
import { eventBus } from './event-bus.js';
export default {
  methods: {
    sendMessage() {
      eventBus.$emit('custom-event', eventData);
    }
  }
}

  3. 在接收组件中监听事件：

    // ReceiverComponent.vue
import { eventBus } from './event-bus.js';
export default {
  created() {
    eventBus.$on('custom-event', this.handleEvent);
  },
  methods: {
    handleEvent(eventData) {
      // 处理接收到的事件及数据
    }
  }
}

在上述例子中，我们首先在 event-bus.js 文件中创建了一个新的 Vue 实例 eventBus。这个实例可以作为事件总线，用来处理组件间的事件通信。

然后，在发送组件 SenderComponent 中，我们使用 eventBus.$emit 方法发送了一个名为 'custom-event' 的自定义事件，并传递了相应的数据 eventData。

在接收组件 ReceiverComponent 中，我们使用 eventBus.$on 方法监听了 'custom-event' 事件，并在 created 钩子函数中注册了事件处理函数 handleEvent。当事件被触发时，该函数将被调用，并传递事件数据 eventData。

通过这种方式，我们可以实现在不同组件之间的事件和数据传递。EventBus 提供了一种简单而强大的方式，让组件可以松散地耦合并进行通信，从而提高了组件的可重用性和灵活性。然而，需要注意使用 EventBus 时要避免滥用，合理使用它来满足组件间通信的需求。

依赖注入（provide / inject）

在 Vue.js 中，依赖注入是一种用于在组件树中共享数据或功能的高级技术。Vue 提供了 provide 和 inject 选项来实现依赖注入。

使用依赖注入，父组件可以通过 provide 选项提供数据或方法，而子组件可以通过 inject 选项注入这些数据或方法。这样，父组件提供的数据或方法可以在整个子组件树中访问和使用，而不需要显式地通过 props 一层一层传递。

以下是使用 provide 和 inject 实现依赖注入的示例：

<!-- 父组件 ParentComponent -->
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import { provide } from 'vue';
import MyDependency from './MyDependency';

export default {
  components: {
    ChildComponent
  },
  setup() {
    provide('dependency', MyDependency);
  }
};
</script>

<!-- 子组件 ChildComponent -->
<template>
  <div>
    <p>{{ dependencyData }}</p>
    <button @click="callDependencyMethod">Call Method</button>
  </div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const dependency = inject('dependency');

    const dependencyData = dependency.getData();

    const callDependencyMethod = () => {
      dependency.someMethod();
    };

    return {
      dependencyData,
      callDependencyMethod
    };
  }
};
</script>

在上述示例中，父组件 ParentComponent 使用 provide 选项提供了一个名为 'dependency' 的依赖项，其值为 MyDependency 对象。

子组件 ChildComponent 使用 inject 选项来注入父组件提供的 'dependency' 依赖项。通过注入，子组件可以访问到 MyDependency 对象，并使用其提供的数据和方法。

在子组件中，我们通过调用 dependency.getData() 方法获取依赖项的数据，并通过 dependency.someMethod() 调用依赖项的方法。子组件可以直接在模板中使用这些数据和方法。

通过依赖注入，我们可以将共享的数据或方法提供给整个组件树中的组件，而无需在每个组件之间显式传递。这种模式可以大大简化组件之间的通信，并提高代码的可维护性和灵活性。

ref / $refs

在 Vue.js 中，ref 是一个用于给组件或DOM元素注册引用的特殊属性，而$refs 是一个用于在组件中访问这些引用的对象。

使用 ref，我们可以在组件或DOM元素上定义一个引用名称，然后通过$refs对象来访问该引用。

以下是一个示例：

<template>
  <div>
    <input type="text" ref="myInput" />
    <button @click="focusInput">Focus Input</button>
  </div>
</template>

<script>
export default {
  methods: {
    focusInput() {
      this.$refs.myInput.focus();
    }
  }
};
</script>

在上述示例中，我们在<input>元素上使用ref属性来定义一个引用名称为myInput。

在focusInput方法中，我们使用this.$refs.myInput来访问引用。通过this.$refs.myInput，我们可以像访问DOM元素一样，调用其属性和方法。在这里，我们调用了focus()方法来聚焦输入框。

需要注意的是，$refs是一个对象，其中的键是我们在ref属性中定义的引用名称，值是对应的组件实例或DOM元素。

需要注意的是，$refs是在组件渲染完成后才会填充的，所以在组件的mounted钩子函数或之后的生命周期钩子中使用$refs才是可靠的。

另外，需要注意的是，$refs只在直接子组件或DOM元素上有效。如果要访问子组件中的引用，可以通过$refs继续深入访问，例如this.$refs.childComponent.$refs.myInput。

总结来说，ref用于在组件或DOM元素上定义引用，$refs用于在组件中访问这些引用，从而方便地操作和访问组件或DOM元素的属性和方法。

$parent / $children

在 Vue.js 中，$parent 和 $children 是用于访问组件实例的特殊属性。

  • $parent 属性用于访问当前组件的父组件实例。
  • $children 属性用于访问当前组件的直接子组件实例的数组。

以下是一个示例：

<template>
  <div>
    <h1>{{ message }}</h1>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello, Parent!'
    };
  },
  mounted() {
    console.log(this.$parent); // 访问父组件实例
    console.log(this.$children); // 访问直接子组件实例的数组
  }
};
</script>

在上述示例中，我们有一个父组件和一个子组件。在父组件中，我们可以通过 this.$parent 访问当前组件的父组件实例。在子组件中，我们可以通过 this.$parent 访问子组件的父组件实例。

同样，我们可以通过 this.$children 来访问当前组件的直接子组件实例的数组。注意，$children 是一个数组，包含了当前组件的直接子组件实例。

需要注意的是，使用 $parent 和 $children 可能会导致组件之间的强耦合，因为它们暴露了组件的层次结构。在大型应用程序中，最好避免过度依赖于这些属性，而是使用 props 和事件来实现组件之间的通信。

此外，由于在 Vue 3 中，$parent 和 $children 不再是响应式的，因此在 Vue 3 中，更推荐使用 provide / inject 或 Vuex 等状态管理库来处理跨组件的通信需求。

$attrs / $listeners

在 Vue.js 中，$attrs 和 $listeners 是用于访问父组件传递给子组件的属性和监听器的特殊属性。

  • $attrs 属性包含了父组件传递给子组件的非 prop 属性。它是一个对象，包含了父组件传递的所有属性（除了子组件声明的 props 外）。
  • $listeners 属性包含了父组件传递给子组件的所有监听器。它是一个对象，包含了父组件传递的所有事件监听器。

以下是一个示例：

<!-- 父组件 ParentComponent -->
<template>
  <div>
    <child-component
      message="Hello, Child!"
      color="blue"
      @custom-event="handleEvent"
    ></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleEvent() {
      // 处理事件
    }
  }
};
</script>

<!-- 子组件 ChildComponent -->
<template>
  <div>
    <h1>{{ message }}</h1>
    <button :style="{ color }" @click="$emit('custom-event')">Click Me</button>
  </div>
</template>

<script>
export default {
  props: ['message'], // 声明 prop
  mounted() {
    console.log(this.$attrs); // 访问父组件传递的非 prop 属性
    console.log(this.$listeners); // 访问父组件传递的监听器
  },
  data() {
    return {
      color: this.$attrs.color // 访问父组件传递的非 prop 属性
    };
  }
};
</script>

在上述示例中，父组件通过 message 和 color 属性以及 custom-event 事件监听器将数据和事件传递给子组件。

在子组件中，我们可以通过 this.$attrs 来访问父组件传递的非 prop 属性。在示例中，我们可以通过 this.$attrs.color 来获取 color 属性的值。

通过 this.$listeners，我们可以访问父组件传递的所有监听器。在示例中，我们绑定了 @custom-event 事件监听器，所以可以在子组件中通过 $emit('custom-event') 触发该事件。

需要注意的是，$attrs 和 $listeners 是仅在子组件内部可用的，它们不会自动传递给更深层次的子组件。如果需要将这些特性传递给下一级子组件，可以使用 v-bind="$attrs" 和 v-on="$listeners"。

总结来说，$attrs 用于访问父组件传递给子组件的非 prop 属性，$listeners 用于访问父组件传递给子组件的监听器。这些特性可以使子组件更灵活地处理父组件传递的属性和事件。

总结

在 Vue.js 中，有几种常见的方式可以实现不同组件之间的通信，包括父子组件间通信、兄弟组件间通信以及任意组件间通信。下面是对每种通信方式的总结：

  1. 父子组件间通信：

    • Props：父组件通过 props 将数据传递给子组件。子组件通过定义和使用 props 属性来接收父组件传递的数据。
    • $emit 和事件：子组件通过 $emit 方法触发自定义事件，并通过父组件中的 v-on 指令监听和处理这些事件。
    • r e f s ：父组件可以通过 r e f 属性引用子组件，并通过 t h i s . refs：父组件可以通过 ref 属性引用子组件，并通过 this. refs：父组件可以通过ref属性引用子组件，并通过this.refs 来访问子组件的实例，从而直接调用子组件的方法或访问子组件的属性。

  2. 兄弟组件间通信：

    • 共享状态：可以使用一个共享的状态管理库（如 Vuex）或通过一个共同的父组件来管理和共享数据。
    • 事件总线：创建一个空的 Vue 实例作为事件总线，兄弟组件通过该实例进行事件的发布和订阅，从而实现兄弟组件之间的通信。
    • 父组件作为中间人：通过将共享数据放在共同的父组件中，然后通过 props 和自定义事件在兄弟组件之间传递数据。

  3. 任意组件间通信：

    • 事件总线：创建一个空的 Vue 实例作为事件总线，任意组件都可以通过该实例进行事件的发布和订阅，实现组件之间的通信。
    • provide / inject：父组件通过 provide 来提供数据，然后子孙组件通过 inject 来注入这些数据，实现跨层级的组件通信。
    • 全局事件总线：创建一个全局的事件总线对象，任意组件都可以通过该对象进行事件的发布和订阅。

需要根据具体的场景和需求选择适当的通信方式。对于简单的组件通信，props 和自定义事件通常足够；对于较复杂的通信需求，可以考虑使用状态管理库或事件总线来管理和共享数据。

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

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

相关文章

备战蓝桥杯---图论之最短路Bellman-Ford算法及优化

备战蓝桥杯---图论之最短路Bellman-Ford算法及优化

目录 上次我们讲到复杂度为&#xff08;nm)logm(m为边&#xff0c;n为点&#xff09;的迪杰斯特拉算法&#xff0c;其中有一个明显的不足就是它无法解决包含负权边的图。 于是我们引进Bellman-Ford算法。 核心&#xff1a;枚举所有的点&#xff0c;能松弛就松弛&#xff0c;直…
阅读更多...
《剑指offer》

《剑指offer》

本专题是分享剑指offer的一些题目&#xff0c;开始刷题计划。 二维数组的中的查找【https://www.nowcoder.com/practice/abc3fe2ce8e146608e868a70efebf62e?tpId13&tqId11154&ru/exam/oj】 描述 在一个二维数组array中&#xff08;每个一维数组的长度相同&#xff0…
阅读更多...
[计算机提升] 备份系统：设置还原点

[计算机提升] 备份系统：设置还原点

6.7 备份系统&#xff1a;设置还原点 在Windows系统中&#xff0c;系统还原点是指系统在特定时间存储的重要系统文件的备份。通过创建系统还原点&#xff0c;可以轻松地将系统恢复到之前创建还原点的状态。这有助于解决系统文件损坏或Windows操作系统出现问题的情况。 1、右键…
阅读更多...
推荐在线图像处理程序源码

推荐在线图像处理程序源码

对于喜爱图像编辑的朋友们来说&#xff0c;Photoshop无疑是处理照片的利器。然而&#xff0c;传统的Photoshop软件不仅需要下载安装&#xff0c;还对电脑配置有一定的要求&#xff0c;这无疑增加了使用的门槛。 现在&#xff0c;我们为您带来一款革命性的在线PS修图工具——基…
阅读更多...
Redis篇----第一篇

Redis篇----第一篇

系列文章目录 文章目录 系列文章目录前言一、什么是 Redis?二、Redis 与其他 key-value 存储有什么不同？三、Redis 的数据类型？四、使用 Redis 有哪些好处？五、Redis 相比 Memcached 有哪些优势？前言 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住…
阅读更多...
GAN生成对抗性网络

GAN生成对抗性网络

一、GAN原理 出发点&#xff1a;机器学习中生成模型的问题 无监督学习是机器学习和未来人工智能的突破点&#xff0c;生成模型是无监督学习的关键部分 特点&#xff1a; 不需要MCMC或者变分贝叶斯等复杂的手段&#xff0c;只需要在G和D中对应的多层感知机中运行反向传播或者…
阅读更多...
（2024，DiS，扩散，状态空间主干，Mamba）具有状态空间主干的可扩展扩散模型

（2024，DiS，扩散，状态空间主干，Mamba）具有状态空间主干的可扩展扩散模型

Scalable Diffusion Models with State Space Backbone 公和众和号&#xff1a;EDPJ&#xff08;进 Q 交流群&#xff1a;922230617 或加 VX&#xff1a;CV_EDPJ 进 V 交流群&#xff09; 目录 0. 摘要 2. 方法 2.1 基础 2.2 模型结构设计 3. 实验 0. 摘要 这篇论文提出…
阅读更多...
挑战杯 python区块链实现 - proof of work工作量证明共识算法

挑战杯 python区块链实现 - proof of work工作量证明共识算法

文章目录 0 前言1 区块链基础1.1 比特币内部结构1.2 实现的区块链数据结构1.3 注意点1.4 区块链的核心-工作量证明算法1.4.1 拜占庭将军问题1.4.2 解决办法1.4.3 代码实现 2 快速实现一个区块链2.1 什么是区块链2.2 一个完整的快包含什么2.3 什么是挖矿2.4 工作量证明算法&…
阅读更多...
MySQL容器的数据挂载

MySQL容器的数据挂载

挂载本地目录或文件 可以发现&#xff0c;数据卷的目录结构较深&#xff0c;如果我们去操作数据卷目录会不太方便。在很多情况下&#xff0c;我们会直接将容器目录与宿主机指定目录挂载。挂载语法与数据卷类似&#xff1a; # 挂载本地目录 -v 本地目录:容器内目录 # 挂载本地…
阅读更多...
《c++primer第5版》知识导图第18章 用于大型程序的工具

《c++primer第5版》知识导图第18章 用于大型程序的工具

下载链接
阅读更多...
社区商铺开什么店最好？从商业计划书到实际运营

社区商铺开什么店最好？从商业计划书到实际运营

在社区商铺开店&#xff0c;选择适合的业态是成功的关键。作为一名开店 5 年的资深创业者&#xff0c;我想分享一些关于社区店的干货和见解。 这篇文章&#xff0c;我用我的项目给大家举例子&#xff01; 鲜奶吧作为一种新兴的业态&#xff0c;以提供新鲜、健康的乳制品为主&…
阅读更多...
抽象的问题1

抽象的问题1

vue3&#xff0c;在使用v-mode绑定属性时&#xff0c;发生了奇怪的问题&#xff0c;渲染失败了 代码如下 <template><div><form><div>账号<input v-model"form_user_Data.username" type"text"></div><div>密…
阅读更多...
百模大战怎么样了？

百模大战怎么样了？

百度入场最早&#xff0c;paddlegan/paddlepaddle多年前就布局了中小模型&#xff0c;ERNIE1.0 大模型早在2019年就发布了&#xff0c;只不过效果差&#xff0c;成本高没弄起来。 后来借着chatgpt的东风&#xff0c;百度几乎国内第一时间发布了国产大模型文心一言&#xff0c;文…
阅读更多...
寒假学习记录17：包管理器（包管理工具）

寒假学习记录17：包管理器（包管理工具）

概念 包&#xff08;package&#xff09; 包含元数据的库&#xff0c;这些元数据包括&#xff1a;名称&#xff0c;描述&#xff0c;git主页&#xff0c;许可证协议&#xff0c;作者&#xff0c;依赖..... 库&#xff08;library&#xff0c;简称lib&#xff09; 以一个或多个模…
阅读更多...
从数字孪生到智慧城市：科技引领下的城市未来展望

从数字孪生到智慧城市：科技引领下的城市未来展望

一、引言 随着科技的飞速发展&#xff0c;数字孪生和智慧城市已成为当今世界城市发展的重要趋势。数字孪生通过建立物理世界的数字模型&#xff0c;为城市管理和规划提供了前所未有的可能性&#xff1b;而智慧城市则借助先进的信息通信技术&#xff0c;使城市运行更加高效、便…
阅读更多...
springboot194基于springboot的医药管理系统

springboot194基于springboot的医药管理系统

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的医药管理系统 适用于计算机类毕业设计&#xff0c;课程设计参考与学习用途。仅供学习参考。 不得用于商业或者非法用途&#xff0c;否则&#xff0c;一切后果请用户自负。 看运行截图看 第五章 第四章 获取资料方式 **…
阅读更多...
软件实例分享，药店进销存软件医药系统进销存教程

软件实例分享，药店进销存软件医药系统进销存教程

软件实例分享&#xff0c;药店进销存软件医药系统进销存教程 一、前言 以下软件程序教程以 佳易王药店进销存管理系统V16.0为例说明 软件文件下载可以点击最下方官网卡片——软件下载——试用版软件下载 软件可以对药品的有效期进行管理&#xff0c;可以查询还有多少天到期的…
阅读更多...
Peter算法小课堂—哈希与哈希表

Peter算法小课堂—哈希与哈希表

额……字符串我们是第一次学&#xff0c;给大家铺一些基础的不能再基础的基础&#xff0c; 字符串比较大小 字符串大小的比较&#xff0c;不是以字符串的长度直接决定&#xff0c;而是从最左边第一个字符开始比较&#xff0c;大者为大&#xff0c;小者为小&#xff0c;若相等…
阅读更多...
详解 Redis 实现数据去重

详解 Redis 实现数据去重

✨✨ 欢迎大家来到喔的嘛呀的博客✨✨ &#x1f388;&#x1f388;希望这篇博客对大家能有帮助&#x1f388;&#x1f388; 目录 言 一. Redis去重原理 1. Redis Set 数据结构 2. 基于 Set 实现数据去重 3. 代码示例 4. 总结 …
阅读更多...
SG5032EEN晶体振荡器SPXO

SG5032EEN晶体振荡器SPXO

5G将使通信流量呈指数级增长&#xff0c;5G通信网络需要高速和宽带&#xff0c;同时将噪声水平保持在最低水平&#xff0c;这可以通过通信设备的高频低抖动参考时钟来实现&#xff0c;使用上述晶体振荡器SPXO&#xff0c;客户可以输入一个具有极低相位抖动和功率的高频参考时钟…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023