Vue.extend()和我的两米大砍刀

Vue.extends是什么?

一个全局API,用于注册并挂载组件。
传统的引用组件的方式是使用import直接引入,但是使用Vue.extends()也可以实现。

使用规则

<div id="mount-point"></div>
// 创建构造器
var Profile = Vue.extend({template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',data: function () {return {firstName: 'Walter',lastName: 'White',alias: 'Heisenberg'}}
})
// 创建 Profile 实例,并挂载到一个元素上。
new Profile().$mount('#mount-point')
//你可以挂载到任何你想挂载的地方
//new Profile().$mount("#app")

注意:应用场景

这种操作类似于直接用js操作dom元素,belike

//创建
const dom = document.createElemnet('div')
dom.innerHtml = '你好'
//挂载
const container = document.getElementById('#mount-point')
container.appendChild(container)

通过这样的类比,我们很容易就明白为什么不推荐使用这种方式去引入使用一个模块组件,因为vue是有自己的虚拟DOM机制和组件挂载过程的,所以不推荐直接操作DOM。建议还是通过触发数据的变化,引发视图变化,即MVVM机制。
非必要请不要使用这种方式去声明使用组件,因为它会使代码变得不好读,且容易造成误解。那么我们在什么情景下去使用这个api呢?

  • vue.extend主要用于动态创建组件的场景,比如弹窗组件、提示框组件等。(官网这么说,但我依然建议不要这么做。)
  • 组件模板都是事先定义好的,我要从接口动态渲染组件。

1.举个我在项目中使用的实际场景:弹窗组件、提示框组件

function createModal(options) {const Modal = Vue.extend({data() {return {title: options.title,content: options.content};},template: `<div class="modal"><h2>{{ title }}</h2>{{ content }}</div>`});const modal = new Modal();modal.mount();document.body.appendChild(modal.el);
}// 调用createModal方法创建一个弹窗
createModal({title: '提示',content: '这是一个弹窗示例'
});

2.一些操蛋的思路:当时在做这个对话的时候我只想着在发生对话的时候创建一个dom,而非使用视图触发,后面涉及了一些复杂交互头痛。写在这里用于加深学习吧……
对话场景

//DialogueItem.vue<template>你好<div @click='stopCurrentAsk'>停止</div>
</template>
<script>
import Vue from 'vue'
export default {name: "DialogueItem ",props: ['type', 'content', 'id'],data() {return {loading: false,};},methods: {changeLoadingStatus(loading) {this.loading = loading},stopCurrentAsk(id) {this.$emit('stopAsk');},}
};
</script>
import DialogueItem from '@/components/DialogueItem'public instand = nullthis.instand = new (Vue.extend(DialogueItem))({propsData: { type, id, content },})this.instand.$mount()//1.子组件触发父组件事件。//上文也提到,这就是个封装成组件的dom,所以,想要通过子组件DialogueItem触发父组件的内容,就直接监听事件就行了this.instand.$on("stopAsk", () => {});//2.父组件触发子组件this.instand.changeLoadingStatus(false)dom.appendChild(this.instand.$el)

说实话,真的难用,大抵是我场景不对。但是用都用了记录一下。

关于我的两米大砍刀

我在项目开发中发现同样的引用和参数,却无法产生同样的结果,最后定位发现是两个组件不同的构建方式导致的。这个罪魁祸首就是Vue.extend(),换一种组件引入方式就解决了。
至于为什么,搜索了半天没有明白是什么原因,有的说是vuex没有被正确注入到根实例中。
懒得看了,反正子组件无法使用vuex,也无法使用,谁知道可以来踩踩……
少用,谢谢!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring 声明式事务控制

1. 编程式事务控制相关对象 1.1 PlatformTransactionManager PlatformTransactionManager 接口是 spring 的事务管理器&#xff0c;它提供了我们常用的操作事务的方法。 PlatformTransactionManager 是接口类型&#xff0c;不同的 Dao 层技术则有不同的实现类。例如:Dao层技…

3分钟看懂Microchip 32位MCU CAN模块的配置

文章目录 CAN模块系统框图Microchip MCC Harmony下CAN模块配置选项CAN模块工作模式CAN模块中断模式CAN工作速率Bit Timing Calculation配置CAN 接收的配置CAN 发送的配置CAN 过滤器工作流程说明CAN 过滤器的配置 CAN模块系统框图 CAN的英文全称&#xff1a;Control Area Networ…

连续时间折线图的前后端实现

技术栈 vue3VChartegg.jsMySQL 需求 根据已有任务数据&#xff0c;获取连续天的任务完成的数量&#xff0c;并且通过接口返回后做成图表。预期数据如下&#xff1a; [{"x": "2024-01-01","y": 0},{"x": "2024-01-02",&q…

Python实现KDJ工具判断信号:股票技术分析的工具系列(8)

Python实现KDJ工具判断信号&#xff1a;股票技术分析的工具系列&#xff08;8&#xff09; 介绍算法公式 代码rolling函数介绍完整代码data代码KDJ.py 介绍 KDJ是一种技术指标&#xff0c;用于衡量价格动量&#xff0c;帮助交易者识别趋势的强度和转折点。 先看看官方介绍&am…

Vue入门篇:概念,快速入门,插值表达式,核心特性,基本Vue指令

目录 1.Vue是什么2.快速入门3.插值表达式{{}}1.作用:2.语法:3.插值表达式的注意点: 4.Vue响应式核心特性5.Vue指令 1.Vue是什么 Vue是一个流行的JavaScript框架&#xff0c;用于构建用户界面。它是一种用于构建单页面应用程序&#xff08;SPA&#xff09;的渐进式框架&#xff…

机器学习系统的设计

1.混淆矩阵 混淆矩阵作用就是看一看在测试集样本集中&#xff1a; 真实值是 正例 的样本中&#xff0c;被分类为 正例 的样本数量有多少&#xff0c;这部分样本叫做真正例&#xff08;TP&#xff0c;True Positive&#xff09;&#xff0c;预测为真&#xff0c;实际为真真实值…

NtripShare2024年第一季度主要技术进展

迷迷糊糊又是一个月没有写点什么&#xff0c;近期想清楚NtripShare在2024的要做什么事情&#xff0c;暂且将NtripShare要做的主要事情为搭建由软件与硬件之间的技术桥梁。 在过去的几年时间里NtripShare对硬件方面一直是规避的态度&#xff0c;今年开始要做一点软硬件搭界的技…

mmcv bug记录

图像分类任务要用到mmcv框架&#xff0c;记录遇到的问题 1. Can‘t import build_from_cfg from mmcv. 解决命令&#xff1a;pip install openmim && mim install mmcv-full 2. python分布式训练 解决方案&#xff1a; 租用多张A40卡&#xff0c;执行下述命令&…

跨站攻击CSRF实验

1.low等级 先利用Burp抓包 将get响应的url地址复制&#xff0c;发到网页上&#xff08;Low等级到这完成&#xff09; Medium&#xff1a; 再将抓到的包发到Repeater上,对请求中的Referer进行修改&#xff0c;修改成和url一样的地址&#xff0c;修改成功。 在这里修改后发送 然…

团队协作:如何利用 Gitee 实现多人合作项目的版本控制

文章目录 前言一、名词解释1、Git是什么&#xff1f;2、Gitee、GitHub和GitLab 二、操作步骤1.安装Git2.创建Gitee仓库3.用vscode连接仓库4. 克隆远程仓库 总结 前言 在软件开发中&#xff0c;有效地管理代码是至关重要的。Gitee 是一个功能强大的代码托管平台&#xff0c;提供…

使用clickhouse-backup迁移数据

作者&#xff1a;俊达 1 说明 上一篇文章中&#xff0c;我们介绍了clickhouse-backup工具。除了备份恢复&#xff0c;我们也可以使用该工具来迁移数据。 这篇文章中&#xff0c;我们提供一个使用clickhouse-backup做集群迁移的方案。 2 前置条件 1、源端和目标端网络联通&a…

LeetCode刷题实战5:最长回文子串

题目内容 给你一个字符串 s&#xff0c;找到 s 中最长的回文子串。 如果字符串的反序与原始字符串相同&#xff0c;则该字符串称为回文字符串。 示例 1&#xff1a; 输入&#xff1a;s "babad" 输出&#xff1a;"bab" 解释&#xff1a;"aba"…

k8s 控制器StatefulSet原理解析

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《Kubernetes航线图&#xff1a;从船长到K8s掌舵者》 &#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、前言 1、k8s概述 2、有状态服务和无状态服务…

von Mises-Fisher Distribution (代码解析)

torch.distribution 中包含了很多概率分布的实现&#xff0c;本文首先通过均匀分布来说明 Distribution 的具体用法, 然后再解释 von Mises-Fisher 分布的实现, 其公式推导见 von Mises-Fisher Distribution. 1. torch.distribution.Distribution 以下是 Uniform 的源码: cl…

C++语言·类和对象(下)

1. 初始化列表 我们回忆上节写的MyQueue类&#xff0c;其中有两个栈类和一个int类型&#xff0c;栈类因为其特殊性&#xff0c;要开空间&#xff0c;所以我们必须手搓Stack类的构造函数。但是正常来说MyQueue自动生成的构造函数会调用自定义类型的默认构造函数&#xff0c;也就…

基于SpringBoot+Vue的体检管理系统 免费获取源码

项目源码获取方式放在文章末尾处 项目技术 数据库&#xff1a;Mysql5.7/8.0 数据表&#xff1a;12张 开发语言&#xff1a;Java(jdk1.8) 开发工具&#xff1a;idea 前端技术&#xff1a;vue html 后端技术&#xff1a;SpringBoot 功能简介 (有文档) 项目获取关键字&…

浏览器渲染流程中的 9 个面试点

记得 08 年以前&#xff0c;打开网页的时候一个页面卡死整个浏览器凉凉。 这是因为当时浏览器是单进程架构&#xff0c;一个页面或者插件卡死&#xff0c;整个浏览器都会崩溃&#xff0c;非常影响用户体验。 经过了一代代工程师的设计&#xff0c;现代浏览器改成了多进程架构&…

异常检测 | SVDD支持向量数据描述异常数据检测(Matlab)

异常检测 | SVDD支持向量数据描述异常数据检测&#xff08;Matlab&#xff09; 目录 异常检测 | SVDD支持向量数据描述异常数据检测&#xff08;Matlab&#xff09;效果一览基本介绍程序设计参考资料 效果一览 基本介绍 用于一类或二元分类的 SVDD 模型 多种核函数&#xff08;…

医学临床预测模型发展新趋势-并联式

医学临床预测模型发展新姿势-并联式 现有的预测模型是对单个结局指标进行分类或者回归&#xff0c;得出最终的结论&#xff0c;而辅助医生进行临床决策。众所周知&#xff0c;临床决策过程中&#xff0c;医生通常会考虑多个结局指标来做出最终的决策&#xff1b;临床研究中也通…

网络编程初步

协议&#xff1a; 一组规则 分层模型结构&#xff1a; OSI七层模型&#xff1a;物、数、网、传、会、表、应 TCP/IP 4层模型&#xff1a;网&#xff08;链路层/网络接口层)、网、传、应 应用层&#xff1a;http、 ftp、 nfs、 ssh、 telneto o .传输层:TCP、UDP 网络层&…