前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue.extend vue.component new vue

vue.extend vue.component new vue

原创
作者头像
conanma
修改2021-11-03 13:04:20
1K0
修改2021-11-03 13:04:20
举报
文章被收录于专栏:正则正则

关系:vue构造->vue组件->vue实例 也就是说不同的vue组件可以共用同一个vue构造,不同的vue实例可以共用同一个vue组件

### Vue.extend( options )

  • 参数 {Object} options *用法 使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。

data选项是特例,需要注意 - 在Vue.extend() 中它必须是函数

代码语言:javascript
复制
// html 
<div id="mount-point"></div>
// js
// 创建构造器
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')
// 或者 放到body 里面 (也可以放到#mount-point里面)
//     const extendComponent = new Profile().$mount()
//     document.body.appendChild(extendComponent.$el)

// js 结果
<p>Walter White aka Heisenberg</p>

### Vue.component( id, [definition] )

  • 参数 {string} id {Function | Object} [definition] *用法 注册或获取全局组件。注册还会自动使用给定的id设置组件的名称
代码语言:javascript
复制
// 注册组件,传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))

// 注册组件,传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })

// 获取注册的组件 (始终返回构造器)
var MyComponent = Vue.component('my-component')
new vue

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的

代码语言:javascript
复制
var vm = new Vue({
  // 选项
})

以下是其他网页参考

代码语言:javascript
复制
<script>
    //vue构造
    Vue.extend({
        props: [],
        data: function() {
            return {}
        },
        template: ""
 
    });
    
    //vue组件
    Vue.component("mycomponent", {
        props: [],
        data: function() {
            return {}
        },
        template: ""
    });
    
    //vue实例
    new Vue({
        el: "",
        data: {}
    });

从上面的代码可以看出,vue构造和vue组件所需的部分初始化结构参数是一样的,这意味着vue实例可以直接跳过vue组件直接使用vue构造对自身组件初始化,也就是vue构造->vue实例,下面是三种API的区别:

vue.extend 特点:

1.只能通过自身初始化结构

使用范围:

1.挂载在某元素下

2.被Vue实例的components引用

3.Vue.component组件引用

代码语言:javascript
复制
<div id="app2"></div>
<script>
    var apple = Vue.extend({
        template: "<p>我是构造函数创建:自身参数:{{a}}|外部传参:{{b}}</p>",
        data: function() {
            return {
                a: "a"
            }
        },
        props: ["b"]
    });
 
    //挂载构造函数
    new apple({
        propsData: {
            b: 'Vue.extend'
        }
    }).$mount('#app2');
</script>

Vue.component 特点:

1.可通过自身初始化组件结构

2.可通过引入Vue.extend初始化组件结构

3.可通过第三方模板temple.html初始化组件结构

使用范围:

任何已被vue初始化过的元素内

代码语言:javascript
复制
<div id="app3">
    <applecomponent v-bind:b="vparam"></applecomponent>
    <mycomponent v-bind:b="vparam"></mycomponent>
    <templecomponent v-bind:b="vparam"></templecomponent>
</div>
 
<script>
    //方法1 【引入构造】
    Vue.component('applecomponent', apple);
    //方法2 【自身创建】
    Vue.component("mycomponent", {
        props: ["b"],
        data: function() {
            return {
                a: "a"
            }
        },
        template: "<p>我是vue.component创建 自身参数:{{a}}|外部传参:{{b}}</p>"
    });
    //方法3 第三方模板引入,可参照上一篇文章
    Vue.component('templecomponent', function(resolve, reject) {
        $.get("./../xtemplate/com.html").then(function(res) {
            resolve({
                template: res,
                props: ["b"],
                data: function() {
                    return {
                        a: "a"
                    }
                }
            })
        });
    });
    var app3 = new Vue({
        el: "#app3",
        data: {
            vparam: "Vue.component"
        }
    });
</script>

new Vue this.

??表示系统属性值,如this.$el

特点:

1.可以通过自身components引用Vue.extend构造,通过自身data向构造传参

2.可以通过自身components引用组件模板,通过自身data向组件传参

使用范围:

1.仅限于自身

代码语言:javascript
复制
<div id="app1">
    <dt1></dt1>
    <vueapple v-bind:b="msg"></vueapple>
</div>
 
<script type="text/x-template" id="dt1">
    <div>这里是子组件1</div>
</script>
 
<script>
    new Vue({
        el: "#app1",
        data: {
            msg: "vue实例参数"
        },
        components: {
            dt1: {
                template: "#dt1"
            },
            vueapple: apple //【引入构造】
        }
    });

</script>

为什么使用 extend

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

  1. 组件模板都是事先定义好的,如果我要从接口动态渲染组件怎么办?
  2. 所有内容都是在 #app 下渲染,注册组件都是在当前位置渲染。如果我要实现一个类似于 window.alert() 提示组件要求像调用 JS 函数一样调用它,该怎么办?

这时候,Vue.extend + vm.$mount 组合就派上用场了。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • ### Vue.extend( options )
  • ### Vue.component( id, [definition] )
    • new vue
    • 为什么使用 extend
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档