vue mixins使用示例

混入 (mixins): 是一种分发 Vue 组件中可以复用功能灵活的方式。混入对象可以包含任意组件的选项。当组件使用混入对象的时候,所有混入对象的选项将被混入该组件本身的选项。
使用示例:
定义使用的mixins对象

export const HelloWorldMixin = {
  data() {
    return {
      count: 0,
    };
  },
  created() {
    console.log("created");
  },
  methods: {
    changeMsg() {
      this.count++;
    },
  },
};

引入使用

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="changeMsg">Change Message</button> {{ count }}
  </div>
</template>

<script>
import { HelloWorldMixin } from '@/minxins/HelloWorld.js'

export default {
  mixins: [HelloWorldMixin],
  name: 'HelloWorld',
  props: {
    msg: String
  },
  // data() {
  //   return {
  //     count: 0,
  //   };
  // },
  // methods: {
  //   changeMsg() {
  //     this.count++;
  //   },
  // },
}
</script>
<style scoped>
</style>

简单说就是将 data, methos 等直接拆分到 HelloWorldMixin.js中

文件目录
在这里插入图片描述

效果:
在这里插入图片描述

使用minxins和当前 vue中 data,methods 效果是一样的,
在单个文件vue内容代码量很大的时候, 进行提取meghods等, 只保留 样式,css
翻阅查找还是更方便些

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

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

相关文章

Chromium 沙盒Sandbox源码介绍(3)

本篇主要说下沙箱的环境变量策略【Environment】&#xff1a; 一、环境变量&#xff1a; getEnvironmentStrings 函数返回指向内存块的指针&#xff0c;该内存块包含调用进程的环境变量 (系统和用户环境变量) getEnvironmentStrings 函数 (processenv.h) - Win32 apps | Mic…

ubuntu2204配置cuda

ubuntu2204配置cuda ✅系统版本&#xff1a;ubuntu22.04 LTS ✅显卡&#xff1a;英伟达2070S ✅CPU&#xff1a;i9 10900 ✅主板&#xff1a;戴尔品牌机 教程&#x1f4a8;&#x1f4a8;&#x1f4a8;&#x1f4a8;&#xff1a; ps&#xff1a;本人按照该方法一遍成功&#…

EasyX:初始化绘图窗口initgraph() 的使用

前言 学习使用EasyX图形库的initgraph窗口函数。 一、创建新项目 二、创建C空项目 三、找个地方存一下&#xff0c;创建 四、如果左边的框框找不到 五、点视图&#xff0c;然后点解决方案管理器&#xff0c;左边的框框就出来了 六、源文件添加新建项 七、给文件取个名&#x…

qt QPushButton详解

QPushButton是Qt Widgets模块中的一个基本控件&#xff0c;用于提供可点击的按钮。它是用户界面中最为常见和常用的控件之一&#xff0c;通过点击按钮&#xff0c;用户可以触发特定的应用程序操作。 重要方法 QPushButton(const QIcon &icon, const QString &text, QWi…

数据通信与网络课程展示图谱问答展示系统

&#x1f4a1; 你是否在学习“数据通信与网络”时感觉知识点分散&#xff0c;难以整理&#xff1f;学了后面忘记前面&#xff0c;知识点的关联也难以梳理&#xff1f;别担心&#xff01;我们公司推出的【数据通信与网络课程展示图谱问答系统】帮你一次性解决所有问题&#xff0…

手撕反向传播

关于二分类的交叉熵损失部分数学推导过程。 有些地方加以注释&#xff0c;公式太多懒得MD格式了 #%% import numpy as np import pandas as pd import matplotlib.pyplot as plt from sklearn import datasetsiris_data datasets.load_iris() in_put_data iris_data.data corr…

Golang | Leetcode Golang题解之第494题目标和

题目&#xff1a; 题解&#xff1a; func findTargetSumWays(nums []int, target int) int {sum : 0for _, v : range nums {sum v}diff : sum - targetif diff < 0 || diff%2 1 {return 0}neg : diff / 2dp : make([]int, neg1)dp[0] 1for _, num : range nums {for j …

【嵌入式Linux】Linux设备树详解

设备树是是Linux中一种用于描述硬件配置的数据结构&#xff0c;它在系统启动时提供给内核&#xff0c;以便内核能够识别和配置硬件资源。设备树在嵌入式Linux系统中尤其重要&#xff0c;因为这些系统通常不具备标准的硬件配置&#xff0c;需要根据实际的硬件配置来动态配置内核…

JMeter之mqtt-jmeter 插件介绍

前言 mqtt-jmeter插件是JMeter中的一个第三方插件&#xff0c;用于支持MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;协议的性能测试。MQTT是一种轻量级的发布/订阅消息传输协议&#xff0c;广泛应用于物联网和传感器网络中。 一、安装插件 mqtt-jmeter项目…

Java项目-基于springboot框架的时间管理系统项目实战(附源码+文档)

作者&#xff1a;计算机学长阿伟 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、ElementUI等&#xff0c;“文末源码”。 开发运行环境 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBoot、Vue、Mybaits Plus、ELementUI工具&#xff1a;IDEA/…

数据抓取时,使用动态IP要注意哪些?

在充满竞争和数据驱动的商业环境中&#xff0c;动态IP已成为数据抓取过程中不可或缺的工具。动态IP的应用能有效提高抓取成功率&#xff0c;但同时也伴随着一系列需要注意的问题。在本文中&#xff0c;我们将详细探讨在数据抓取时使用动态IP时应注意的事项&#xff0c;以确保抓…

git-合并连续两次提交(一个功能,备注相同)

前言&#xff1a; 场景是这样&#xff0c;由于我是实现一个功能&#xff0c;先进行了一次commit,然后我发现写的有些小问题&#xff0c;优化了一下功能并且把代码优化了一次&#xff0c;于是又提交了一次。两次的提交都是以相同的备注&#xff08;当然这个无所谓&#xff09;&a…

【设计模式系列】简单工厂模式

一、什么是简单工厂模式 简单工厂模式&#xff08;Simple Factory Pattern&#xff09;是一种设计模式&#xff0c;其中包含一个工厂类&#xff0c;根据传入的参数不同&#xff0c;返回不同类的实例。这个工厂类封装了对象的创建逻辑&#xff0c;使得客户端代码可以从直接创建…

CSDN Markdown 编辑器语法大全

Markdown 是一种轻量级标记语言&#xff0c;它以简洁、易读易写的特点&#xff0c;被广泛应用于技术文档、博客文章、笔记等领域。CSDN 的 Markdown 编辑器为用户提供了丰富的功能&#xff0c;让用户能够轻松地创建格式规范、内容丰富的文档。以下是一份详细的 CSDN Markdown 编…

Python 应用可观测重磅上线:解决 LLM 应用落地的“最后一公里”问题

作者&#xff1a;彦鸿 背景 随着 LLM&#xff08;大语言模型&#xff09;技术的不断成熟和应用场景的不断拓展&#xff0c;越来越多的企业开始将 LLM 技术纳入自己的产品和服务中。LLM 在自然语言处理方面表现出令人印象深刻的能力。然而&#xff0c;其内部机制仍然不明确&am…

本地大模型部署和基于RAG方案的私有知识库搭建

背景与目的 在人工智能领域&#xff0c;大语言模型如GPT系列、BERT等&#xff0c;以其强大的语言生成与理解能力&#xff0c;正在深刻改变着我们的工作与生活方式。这些模型通过海量数据训练而成&#xff0c;能够执行从文本生成、问答系统到代码编写等多种任务。然而&#xff…

目标检测——yolov5-3.1的环境搭建和运行

第一步&#xff1a;安装anaconda环境&#xff0c;并且配置好cuda&#xff0c;安装需要的基本包 查看对应cuda版本&#xff0c;后续下载cudatoolkit需要对应版本 nvcc -V 第二步&#xff1a;创建虚拟环境&#xff0c;激活环境&#xff0c;安装所需的包 conda create -n yolo…

V2X介绍

文章目录 什么是V2XV2X的发展史早期的DSRC后起之秀C-V2XC-V2X 和DSRC 两者的对比 什么是V2X 所谓V2X&#xff0c;与流行的B2B、B2C如出一辙&#xff0c;意为vehicle to everything&#xff0c;即车对外界的信息交换。车联网通过整合全球定位系统&#xff08;GPS&#xff09;导…

一个非常有趣的问题——链表带环问题

目录 前言 一、为什么快指针每次⾛两步&#xff0c;慢指针⾛⼀步可以相遇&#xff0c;有没有可能遇不上 二、快指针⼀次⾛3步&#xff0c;⾛4步&#xff0c;...n步⾏吗? 三、求环形链表中入环的节点 前言 在学习链表的时候我发现一个一个非常有趣的问题链表带环&#xff0c;…

重生之我爱上了k8s!

内容不全&#xff0c;待补充中...... 目录 一、k8s的部署 1.1.集群环境初始化 1.1.1.所有主机禁用swap 1.1.2.安装k8s部署工具 1.1.2.所有节点安装cri-docker 1.1.3.在master节点拉取K8S所需镜像 1.1.4.集群初始化 1.1.5.其他两台主机加入集群 1.1.6.安装flannel网络…