vue Vue.extend和extends模板选项

朱雀 2021-07-24 22:44 810阅读 0赞

1、Vue.extends
    	使用基础Vue构造器,创建一个“子类”。参数是一个包含组件选项的对象。
    	
    	(1)创建构造器
    		var Profile = Vue.extend({
    		  template: '<p>{
       {firstName}} {
       {lastName}} aka {
       {alias}}</p>',
    		  data: function () {
    		    return {
    		      firstName: 'Walter',
    		      lastName: 'White',
    		      alias: 'Heisenberg'
    		    }
    		  },
    		  props: ['msg'],
    		})
    		
    		或
    		Vue.extend(组件实例)
    		
    	(2)创建Profile实例,并挂载到一个元素上。
    		new Profile().$mount('#mount-point')
    		
    		创建实例时再传递props,合并规则和mixins相同
    		var vm = new Profile({
    		  propsData: {
    		    msg: 'hello'
    		  },
    		  el:"#app"
    		})
    
    2、extends模板选项
    	允许声明扩展另一个组件(选项对象或构造函数)。这主要是为了便于扩展单文件组件。
    	使用方式和效果同mixins类似
    	
    	const op={
    	  data(){
    	    return {
    	      t1:"tit"
    	    }
    	  },
    	  mounted() {
    	    console.log("来自extends")
    	  },
    	}
    	
    	export default defineComponent({  //定义一个组件
    	  name: 'AsyncHelloWorld',
    	  extends:op,
    	})

发表评论取消回复

表情：

评论列表（有 0 条评论，810人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue常见选项和属性

Vue选项 1. 数据选项 Vue在声明组件时，如果使用了对象类型的data选项，模板将找不到data中被声明的数据。如果使用了支持Vue模板的语法检器，将得到错误

以你之姓@/ 2023年07月25日 14:10/ 0 赞/ 18 阅读

相关 $.fn.extend()；和 $.extend()；

粗略理解可以认为： \\\ $.fn.extend() 是给jquery 增加实例方法：一般我们写插件，要使用这种 $.extend() 是给 jquery 增加类

小灰灰/ 2022年09月26日 02:21/ 0 赞/ 197 阅读

相关 vue:extend和mixin的区别

![在这里插入图片描述][82e2f22231b84f8fa9df10dae59a097c.png] ![在这里插入图片描述][watermark_type_ZHJvaWR

悠悠/ 2022年09月12日 14:57/ 0 赞/ 262 阅读

相关 $.extend()和$.fn.extend()区别

jQuery.fn的作用 jQuery1.83中的代码如下: jQuery.fn = jQuery.prototype = {

「爱情、让人受尽委屈。」/ 2022年08月19日 04:50/ 0 赞/ 448 阅读

相关 Django的extend模板继承

base.html母版页设计： ![70][] 代码如下： <!DOCTYPE html> <html lang="en"> <head>

曾经终败给现在/ 2022年05月12日 11:44/ 0 赞/ 214 阅读

相关二十五、Extends Option 扩展选项

Extends Option 扩展选项通过外部增加对象的形式，对构造器进行扩展。 <!DOCTYPE html>

ゝ一世哀愁。/ 2022年05月03日 11:57/ 0 赞/ 174 阅读

相关 Vue之extends对象

extends对象跟mixins对象很类似区别 extends只支持一个对象，而mixins支持的是数组 extends:countConsole,

￡神魔★判官ぃ/ 2022年04月18日 01:48/ 0 赞/ 221 阅读

相关 vue mixins和extends的妙用

转载自：https://juejin.im/post/5a38d222f265da4312810a76 写在前面 > vue提供了mixins、extends配置项，最

我就是我/ 2021年09月19日 19:42/ 0 赞/ 351 阅读

相关构建个人组件库——vue.extend和vue.component

需求：构建一个类似[elment-ui][]的组件库，打包发布到npm 个人探索：webpack打包发布到npm流程 --> 组件开发环境和组件发布环境探索

我就是我/ 2021年09月15日 08:12/ 0 赞/ 379 阅读

相关 vue Vue.extend和extends模板选项

1、Vue.extends 使用基础Vue构造器,创建一个“子类”。参数是一个包含组件选项的对象。 (1)创建构造器 var

朱雀/ 2021年07月24日 22:44/ 0 赞/ 811 阅读