Vue.extend使用及理解

最新推荐文章于 2024-03-04 22:40:55 发布

闲人不梦卿

最新推荐文章于 2024-03-04 22:40:55 发布

阅读量780

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/atu1111/article/details/119256970

版权

vue 专栏收录该内容

53 篇文章 3 订阅

订阅专栏

Vue.extend使用及理解

Vue.extend返回的是一个“扩展实例构造器”，也就是一个预设了部分选项的 Vue 实例构造器。刚学的时候对“扩展实例构造器”这一名词感觉很疑惑，其实它就像构造函数，构造函数中会事先定义好一些属性，new出来的对象也就默认有构造函数中的属性，同理Vue.extend也是如此

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="vm">
    <div id="point"></div>
  </div>
<script src="vue.js"></script>
<script>

    var app = new Vue({
        el:"#vm",
        data:{
        },
        methods:{
        }
    })
    // 创建构造器
    var Extend  = Vue.extend({
    template: `<p v-on:click="wordClick"> {{ text }} </p>`,
    data() {
        return {
            text: 'default word'
        }
        },
        methods:{
            wordClick(){
                console.log('click me')
            }
        }
    })
    // 创建 Profile 实例，并挂载到一个元素上。可以发现Id为point的div ,是直接被替代了，没有在内部填充
    const extendComponent = new Extend({
      data() {
          return {
              text: 'hello world'
          }
      }
    }).$mount('#point');
</script>
<!--
  在我们 main.js 初始化的时候用发其实也是一样：

    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app');  // 此处都是替换，不是填充
 -->
</body>
</html>

extend是一个“扩展实例构造器”，预设了template，data，methods，当new出一个新的对象的时候，新对象也默认拥有这些模块，同时也可以替换新的属性，非常灵活。

闲人不梦卿

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue.extend使用及理解

Vue.extend使用及理解 Vue.extend返回的是一个“扩展实例构造器”，也就是一个预设了部分选项的 Vue 实例构造器。刚学的时候对“扩展实例构造器”这一名词感觉很疑惑，其实它就像构造函数，构造函数中会事先定义好一些属性，new出来的对象也就默认有构造函数中的属性，同理Vue.extend也是如此<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met
复制链接

扫一扫