Vue中 Vue.extend() 详解及使用-程序员宅基地

Vue.extend 属于 Vue 的全局 API，在实际业务开发中我们很少使用，因为相比常用的 Vue.component 写法使用 extend 步骤要更加繁琐一些。但是在一些独立组件开发场景中，Vue.extend + $mount 这对组合是我们需要去关注的。

1. 应用场景
在 vue 项目中，初始化的根实例后，所有页面基本上都是通过 router 来管理，组件也是通过 import 来进行局部注册，所以组件的创建不需要去关注，相比 extend 要更省心一点点。但是这样做会有几个缺点：

组件模板都是事先定义好的，如果我要从接口动态渲染组件怎么办？
所有内容都是在 #app 下渲染，注册组件都是在当前位置渲染。如果我要实现一个类似于 window.alert() 提示组件要求像调用 JS 函数一样调用它，该怎么办？
这时候，Vue.extend + vm.$mount 组合就派上用场了。

2.1 基础用法

Vue.extend( options )
  参数：{Object} options
  用法：使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象；
  	   data 选项是特例，需要注意： 在 Vue.extend() 中它必须是函数；

<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')

// 结果如下：
<p>Walter White aka Heisenberg</p>

可以看到，extend 创建的是 Vue 构造器，而不是我们平时常写的组件实例，所以不可以通过 new Vue({ components: testExtend }) 来直接使用，需要通过 new Profile().$mount(’#mount-point’) 来挂载到指定的元素上。

2.2 第二种写法

可以在创建实例的时候传入一个元素，生成的组件将会挂载到这个元素上，跟 $mount 差不多。

// 1. 定义一个vue模版 
let  tem ={
    template:'{
   {firstName}} {
   {lastName}} aka {
   {alias}}',
    data:function(){    
    return{    
	    firstName:'Walter',   
	    lastName:'White',    
	    alias:'Heisenberg'
    }
}

// 2. 调用
const TemConstructor = Vue.extend(tem) 
const intance = new TemConstructor({el:"#app"}) // 生成一个实例，并且挂载在 #app 上

本文链接：https://blog.csdn.net/qq_63358859/article/details/125442312

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Vue的虚拟DOM是什么-程序员宅基地

文章浏览阅读310次。由于现代网络和浏览器的发展，网页的内容也变得很复杂，ajax 诞生让用户可以在不刷新页面的条件下获取到数据。但是新的数据的渲染需要操作dom,这个是比较耗性能的。所以人们想出来，将dom转化成js也称为vdom,通过跑js程序，对比出来新vdom 和老vodm，拿到需要更新变化的vdom，这样就可以通过dom操作，需要变化的内用。简单来说，不再因为一部分的改动就把整体的dom重新渲染，通过筛选出来变动的内容，只渲染变动的内容。核心思想：使用 js对象的形式来表现html的dom结构。

wget报错-程序员宅基地

文章浏览阅读4.5k次，点赞5次，收藏6次。1.刚开始我输入的指令是这样的wget https://pjreddie.com/media/files/yolov3-tiny.weights2.发现报错 ERROR: cannot verify pjreddie.com's certificate, issued by `/C=US/O=Let's Encrypt/CN=Let's Encrypt Authority X3':..._wget报错

Java 转换utf8,java：如何将文件转换为utf8-程序员宅基地

文章浏览阅读755次。i have a file that have some non-utf8 caracters (like "ISO-8859-1"), and so i want to convert that file (or read) to UTF8 encoding, how i can do it?The code it's like this:File file = new File("some_f..._new file怎么转化utf8

Vue中引入字体并解决字体文件过大问题_vue 引入字体包体积过大-程序员宅基地

文章浏览阅读5.6k次。利用 CSS3 @font-face 规则指定名为"myFirstFont"的字体，并指定在哪里可以找到它的URL：@font-face{font-family: myFirstFont;src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9 */}在main.js中全局引用文件import '@/styles/index.scss'解决字体文件过大问题Fontmin - 字体子集化方案_vue 引入字体包体积过大

转-- 定制PYNQ的overlay-程序员宅基地

文章浏览阅读551次。一、用HLS生成一个定制IP（加速器）（1）首先打开vivado hls，本人的版本是2017.2，点击创建一个新工程。（2）设置工程名和路径，顶层函数设置为add，创建一个新的C++程序，名字叫做adder.cpp,不用在testbench中添加文件。选择板子的时候搜索xc7z020clg400-1，这是PYNQ的板子号，选择完成。（3）在左侧的..._定制pynq的overlay

rocketMQ中，消费者、消费者组、Topic、队列的关系_rocketmq topic和queue关系-程序员宅基地

文章浏览阅读2w次，点赞28次，收藏76次。初学roketMQ的同学可能会比较难以理解这四者之间的关系，这里我来理一下。1、消费者和消费者属于个体与群体的关系，非常容易理解，不赘述2、Topic是相当于一种消息类型，而队列queue则是属于某个Topic下的更细分的一种单元。举个例子。Topic代表老虎，是一种动物类型，而队列就相当于东北虎，是对老虎的更详细描述。3、在同一个消费者组下的消费者，不能同时消费同一个queue。4、一个消费者组下的消费者，可以同时消费同一个Topic下的不同队列的消息。5、不同消费者组下的消费者，可以同时._rocketmq topic和queue关系

随便推点

python+django+mysql校园失物招领系统毕业设计毕设开题报告_基于pythondjango的开题报告-程序员宅基地

文章浏览阅读389次，点赞2次，收藏2次。本章主要介绍了系统在开发过程中所应用到的一些关键的技术，主要包括核心的Python编程语言、Django框架；MySQL数据库；以及常规的网页技术HTML/CSS/JAVASCRIPT的介绍。开发操作系统：windows10 + 4G内存 + 500G硬盘开发环境：Python3.8开发语言：Python开发框架：Django开发工具：pycharm数据库：mysql8数据库管理工具：navicat其他开发语言：html + css +javascript。_基于pythondjango的开题报告