vue extend 的使用
2024-05-28 19:09:46
前提：
使用之前需要在vue.config.js中添加
runtimeCompiler: true,如图：
使用：
第一种：无参数
1. 创建index.js
图片：
代码：
import Vue from "vue";
var RootEle = Vue.extend({template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',data: function () {return {firstName: 'Walter',lastName: 'White',alias: 'Heisenberg'}}})
export default RootEle2. HelloWorld中加载
图片：
代码：
<template><div id="root"></div>
</template><script>
import RootEle from "../extend/index";
export default {data() {return {};},mounted() {new RootEle().$mount("#root");},
};
</script>
第二种：传参数
图片：
代码：
import Vue from "vue";
var RootEle = Vue.extend({template: "<p>{{firstName}} {{lastName}} aka {{alias}}</p>",props: ["firstName"],data: function () {return {lastName: "White",alias: "Heisenberg",};},
});
export default RootEle;图片：
代码：
<template><div id="root"></div>
</template><script>
import RootEle from "../extend/index";
export default {data() {return {};},mounted() {new RootEle({propsData:{firstName:'这是父组件传递过来的数据'}}).$mount("#root");},
};
</script>第三种：传方法
使用 $on , $emit
图片：
代码：
import Vue from "vue";
var RootEle = Vue.extend({template:"<p @click='some_event'>{{firstName}} {{lastName}} aka {{alias}}</p>",props: ["firstName"],data: function () {return {lastName: "White",alias: "Heisenberg",};},methods: {some_event() {this.$emit("some_event", "这是方法传递过去的参数");},},
});
export default RootEle;
图片：
代码：
<template><div id="root"></div>
</template><script>
import RootEle from "../extend/index";
export default {data() {return {};},mounted() {const root = new RootEle({propsData: {firstName: "这是父组件传递过来的数据",},}).$mount("#root");root.$on("some_event", function (e) {console.log(e);});},
};
</script>第四种：插槽数据
图片：
代码：
import Vue from "vue";
var RootEle = Vue.extend({template: `<p>
{{firstName}} {{lastName}} aka {{alias}}
<slot name='footer'/></p>`,props: ["firstName"],data: function () {return {lastName: "White",alias: "Heisenberg",};},
});
export default RootEle;图片：
代码：
<template><div id="root"></div>
</template>
<script>
import RootEle from "../extend/index";
export default {data() {return {};},mounted() {const root = new RootEle({propsData: {firstName: "这是父组件传递过来的数据",},});const h = this.$createElement;root.$scopedSlots = {footer: function () {return [h("span",{ style: { color: "red" } },"这是父组件传递过来的插槽数据"),];},};root.$mount("#root");},
};
</script>第五种：作用于插槽
图片：
代码：
import Vue from "vue";
var RootEle = Vue.extend({template: `<p>
{{lastName}} aka {{alias}}
<slot name='footer' :message='firstName'/></p>`,props: ["firstName"],data: function () {return {lastName: "White",alias: "Heisenberg",};},
});
export default RootEle;图片：
代码：
<template><div id="root"></div>
</template><script>
import RootEle from "../extend/index";
export default {data() {return {};},mounted() {const root = new RootEle({propsData: {firstName: "这是父组件传递过来的数据",},});const h = this.$createElement;root.$scopedSlots = {footer: function (slotData) {return [h("span", { style: { color: "red" } }, slotData.message)];},};root.$mount("#root");},
};
</script>另一种写法，不用js，直接用组件
图片：
代码：
<template><div>{{ lastName }} aka {{ alias }}<slot name="footer" :message="firstName" /></div>
</template>
<script>
export default {props: ["firstName"],data: function () {return {lastName: "White",alias: "Heisenberg",};},
};
</script>
图片：
代码：
<template><div id="root"></div>
</template><script>
import Vue from "vue";
import ExtendExample from "./ExtendExample.vue";
export default {data() {return {};},mounted() {const RootEle = Vue.extend(ExtendExample);const root = new RootEle({propsData: {firstName: "这是父组件传递过来的数据",},});const h = this.$createElement;root.$scopedSlots = {footer: function (slotData) {return [h("span", { style: { color: "red" } }, slotData.message)];},};root.$mount("#root");},
};
</script>vue extend 的使用相关推荐
- Vue.extend
Vue.extend 1.传递的参数 Vue.extend({Object}),传递的是一个对象,这个对象包含template等,其实就是传递一个包含组件选项的对象. 他是属于Vue的全局API,用来 ...
- Vue利用Vue.extend()实现自定义弹出框
运用场景:如果想实现一个类似于 window.alert() 提示组件要求像调用 JS 函数一样调用它,这时候Vue.extend + vm.$mount 组合就派上用场了. 简单介绍: Vue.ex ...
- vue.extend的问题
问题场景 使用Vue.extend时 <template><div><div id="mount-point"></div>< ...
- V记录2(文档)Vue.extend构造器
1.简单介绍 Vue.extend(options) 参数:对象 用法:使用Vue构造器,创建一个"子类",参数是一个包含组件选项的对象,其中,data选项中必须是函数 描述:Vu ...
- vue.extend与vue.component的区别和联系
一味的闷头开发,却对基础概念缺乏理解,是个大坑... 查阅官网后现对自己的理解记录一下,用于日后复习巩固 Vue.extend({}) 简述:使用vue.extend返回一个子类构造函数,也就是预设部 ...
- Vue extend 学习
<div id="box"><aa></aaa></div><script>var Aaa = Vue.extend({ ...
- vue2.0中组建里面套用组件_vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码...
具体代码如下所示: document var aaa=vue.extend({//继承出来一个vue类aaa template:' 我是标题3 ' }); var a=new aaa();//a跟vm ...
- Vue.extend构造器
1.简单介绍 Vue.extend(options) 参数:对象 用法:使用Vue构造器,创建一个"子类",参数是一个包含组件选项的对象,其中,data选项中必须是函数 描述:Vu ...
- 关于vue.extend的理解应用
一.基本概念 Vue.extend( options ) 使用基础 Vue 构造器,创建一个"子类".参数是一个包含组件选项的对象. 一般,我们会用 Vue.extend 接收一个 ...
- vue:extend和mixin的区别
提到extend 总是感觉有些熟悉,都是可以共用一些方法和属性这不就是mixin混入吗?其实两者还是有较大差别的,可以类比后端语言的继承和多态,extend类似继承,而mixin类似多态. vue e ...
最新文章
- 微软终于想通把Script56文档更新了
- 安卓高手之路之ClassLoader(总结篇)
- ubuntu下安装各种软件
- Scaffolding Template on Asp.Net Core Razor Page
- 对所谓原生软件的偏执
- 第一次冲刺-个人总结05
- 万能采集网站php源码,PHP采集系统UZCMS万能最新版
- 机器人工程师技术资料
- 不要熬夜肝PPT了！络绎科学一键生成科研PPT工具Slidebot来啦！
- 菜鸟学习Docker实例
- 用数字暗示我喜欢你_我喜欢数字！
- linux系统一直循环登录界面,Ubuntu卡在登陆界面无限循环的问题
- 博主介绍技术圈子博文整理
- java spark的使用和配置
- linux 桌面 修复工具下载,Redis Desktop Manager 0.9.7发布下载，Redis桌面管理工具
- Eclipse注释日期格式
- MySQL详细学习教程（一）
- MATLAB与高等数学--导数计算与极值的求解
- 笔记本电脑电池校正小方法
- 精品基于Python实现的医院挂号系统医生