【vue定义组件的几种方式】

最新推荐文章于 2024-05-02 08:06:07 发布

柒一’

最新推荐文章于 2024-05-02 08:06:07 发布

阅读量196

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_67969470/article/details/127660333

版权

组件的名字当作标签不使用内置或保留的HTML元素作为组件id

   <div id='app'>
        <!-- 组件的名字当作标签 不使用内置或保留的HTML元素作为组件id -->
        <login></login>
    </div>

1、 Vue.extend Vue.component

第一种：需要 Vue.extend Vue.component联用

 //1、 Vue.extend Vue.component
        var login = Vue.extend({
            template:'<h1>登录</h1>'
        })
        // 定义全局组件（组件的名字，声明）
        Vue.component('login',login)

2、Vue.component

第二种：只需要 Vue.component

// 2、
        Vue.component('login',{
            template:'<h1>登录</h1>'
        })

3、x-template

第三种：需要将script的type类型改为 x-template

// 3、
       <script type="x-template" id="temp"><h1>login</h1></script>
        Vue.component('login',{
            template:'#temp'
        })

4、template标签

第四种：需要写一个template标签，在template标签中写内容。 个人推荐第四种方式

// 4、
<!-- 只能有一个根元素 --> 注意！！！

   <template id="temp">
        <div>
            <h2>123456789</h2>
        </div>
    </template>
    
        Vue.component('login',{
            template:'#temp'
        })