03 Vue进阶extend使用方法详讲

extend主要用于高级组件开发，开发插件或this.$notiy这样的方式调用组件

有二种方式使用extend

一.extend的两种使用方式

1.方式一：extend的方式创建组件 Vue.extend(com)

<script>const com = {data: {text: 1},mounted() {console.log('com')console.log(this.text)}}// extend的使用方式1，js方式创建组件let comVue = Vue.extend(com)new comVue({ // 创建组件el: '#app',data: {text: 3},mounted() {console.log('instace')}})</script>

控制台输出：

2.方式一：extends的方式 extends: 'com'

<body><script src=" https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><div id="app"><com2></com2>  // 此处使用了com2组件</div><script>const com = {data: {text: 1},mounted() {console.log('com')console.log(this.text)}}const com2 = { // 又是一个对象extends: 'com',data: {text: 9},mounted() {console.log('com2')}}new Vue({el: '#app',
data: {text: 3},components: {com2: com2},mounted() {console.log('vue')}})</script>
</body>

控制台输出：

区别：

Vue.extend的方式不用调用即可使用，extends的方式需要调用才能使用，我们开发组件的时候就需要衡量

结论：

使用继承后data,computed，事件都被会覆盖, mounted 都会被触发（先触发被继承的,再触发继承后的），prop 需要通过propsData传值

03 Vue进阶extend使用方法详讲相关推荐

Java8-5-Function函数式接口进阶与默认方法详解
Java8-5-函数式接口进阶与默认方法详解上一篇我们快速的借助示例演示了stream api的简单应用,体会到了使用stream api对集合处理的便捷和其与函数式接口密不可分的关系,所以为了更高 ...
keep alive PHP,vue中keep-alive使用方法详解
这次给大家带来vue中keep-alive使用方法详解,vue中keep-alive使用的注意事项有哪些,下面就是实战案例,一起来看一下. 1.keep-alive的作用以及好处在做电商有关的项目中 ...
【Java基础】重写equals方法详讲
一.重写equals方法 [Java比较学习]重写equals方法的安全写法 1.重写equals方法的两种方式这里提供两个比较常见的equals重写方法: ● 用instanceof实现重写equ ...
Vue 进阶教程之：详解 v-model
分享 Vue 官网教程上关于 v-model 的讲解不是十分的详细,写这篇文章的目的就是详细的剖析一下, 并介绍 Vue 2.2 v-model 改进的地方,然后穿插的再说点 Vue 的小知识. 在 ...
Vue进阶（贰零壹）：JS合并两个数组方法详解
文章目录一.前言二.实现 2.1 concat 2.2 for循环 2.3 apply 2.4 ...拓展符三.拓展阅读一.前言项目开发过程中,将两个数组合并成为一个的情况十分常见.比如: ...
Vue进阶（幺肆捌）：Vuex 辅助函数详解
文章目录一.前言二.辅助函数三.如何使用辅助函数四.辅助函数如何去映射 vuex.store 中的属性 4.1 mapState: 把 state 属性映射到 computed 身上 4.2 ...
Vue进阶（四十三）：Vuex之Mutations详解
文章目录一.前言二.如何使用 mutations ? 三.源码分析四.拓展阅读一.前言通俗理解mutations,里面装着一些改变数据方法的集合,这是Vuex设计很重要的一点,就是把处理数据 ...
Vue进阶（五十三）：vue-cli 脚手架 webpack.prod.conf.js 配置文件详解
文章目录一.前言二.optimize-css-assets-webpack-plugin 插件三.拓展阅读一.前言 webpack.prod.conf.js 配置文件是webpack生产环境核 ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...

03 Vue进阶extend使用方法详讲

一.extend的两种使用方式

1.方式一：extend的方式创建组件 Vue.extend(com)

2.方式一：extends的方式 extends: 'com'

区别：

结论：

03 Vue进阶extend使用方法详讲相关推荐

最新文章

热门文章

03 Vue进阶extend使用方法详讲

一.extend的两种使用方式

1.方式一 ：extend的方式创建组件 Vue.extend(com)

2.方式一 ：extends的方式 extends: 'com'

区别：

结论：

03 Vue进阶extend使用方法详讲相关推荐

最新文章

热门文章

1.方式一：extend的方式创建组件 Vue.extend(com)

2.方式一：extends的方式 extends: 'com'