vuejs全局组件创建的方式

admin2022-01-13451

  vue组件分为全局组件和私有组件,我们先看看全局组件的创建方式。

第一种方式:

vue创建组件用component方法创建。

1、首先创建一个组件的模版。

var com1 = Vue.extend({
     template: '<h1>Hello World</h1>'
})

2、注册组件。示例代码里的第一个函数为要创建的组件名称,第二个为组件的模版。

Vue.component('mycom1',com1 )

这样就成功的创建了组件,上面两步可以合并为如下代码

Vue.component('mycom1', Vue.extend({
                template: '<h1>Hello World</h1>'
}))

3、然后在模版里显示组件,直接用组件的名称作为标签即可显示。

<mycom1></mycom1>

第二种方式:

直接用对象的形式创建。

Vue.component('mycom2', {
       template: '<h1>组件的第二种创建方式</h1>'
})

这样组件就创建成功了,显示方法一样

<mycom2></mycom2>

上面两种完整代码如下

   <div id="main" v-cloak>
        <mycom1></mycom1>
        <mycom2></mycom2>
        <mycom3></mycom3>
    </div>

    <template id="temp">
        <div>
            <h1>组件第三种形式</h1>
            <h2>hello</h2>
        </div>
    </template>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //组件的第一种创建方式
         var com1 = Vue.extend({
             template: '<h1>Hello World</h1>'
         })
         Vue.component('mycom1',com1 )
        //组件的第一种创建方式的简写
        Vue.component('mycom1', Vue.extend({
             template: '<h1>Hello World</h1>'
        }))
        //组件的第二种创建方式
        Vue.component('mycom2', {
             template: '<h1>组件的第二种创建方式</h1>'
        })
        var vm = new Vue({
            el: '#main',
        })
     </script>

以上两种方式都有一个缺点,就是如果模版里有很多内容代码就没有办法写了,所以这就有了第三种创建方式。

第三种方式:

用#号来给模版赋一个值

    <script>
    //组件的第二种创建方式
        Vue.component('mycom3', {
            template: '#temp'
        })
    </script>

然后在div标签和script标签的中间写模版,模版id就是上一步创建组件时赋的值

<template id="temp">
        <div>
            <h1>组件第三种形式</h1>
            <h2>hello</h2>
       </div>
</template>

然后在div标签中显示即可

<mycom3></mycom3>

完整代码如下

    <div id="main" v-cloak>
        <mycom3></mycom3>
    </div>

    <template id="temp">
        <div>
            <h1>组件第三种形式</h1>
            <h2>hello</h2>
        </div>
    </template>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // var com1 = Vue.extend({
        //     template: '<h1>Hello World</h1>'
        // })
        //组件的第三种创建方式
        Vue.component('mycom3', {
            template: '#temp'
        })
        var vm = new Vue({
            el: '#main',
        })
    </script>

一般代码量大的情况只能使用第三种方式创建组件。

相关文章:

vuejs私有组件创建的方式

网友评论