vue组件

最新推荐文章于 2026-01-02 20:59:19 发布

原创最新推荐文章于 2026-01-02 20:59:19 发布 · 576 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍了Vue.js中的组件化开发，包括组件的概念、功能模块的划分以及全局组件的三种定义方式。组件化有助于代码逻辑的模块化和UI界面的复用，提升开发效率。同时，文章强调了组件模板的注意事项，如需有一个根元素，避免使用已有的HTML标签，并遵循特定的命名规范。此外，还提到了数据隔离和局部组件的定义。

一、什么是组件

拆分Vue实例的代码量，能够让我们以不同的组件，来划分不同的功能模块

二、功能模块

模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一。

组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用。

三、全局组件定义的三种方式

方式一

<div id='app'>
      <!-- 组件名当作标签使用 -->
      <login></login>       
</div>


//声明全局组件   参数1 组件名  2，组件内容
var login = Vue.extend({
    template: '<h1>登录</h1>'
});
//使用当作标签使用
Vue.component('login', login); 
const vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
        },
    })

方式二

<div id='app'>
      <!-- 组件名当作标签使用 -->
      <login></login>       
</div>


Vue.component("login",{template:"<h2>哈哈</h2>"})
const vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
        },
    })

方式三

<div id='app'>
      <!-- 组件名当作标签使用 -->
      <login></login>       
</div>

//将模板字符串，定义到script标签种
<script type="x-template" id="study"> 
        <h3>哈哈</h3>
</script>


Vue.component("login",{template:"#study"})
const vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
        },
    })

方式四

<div id='app'>
      <!-- 组件名当作标签使用 -->
      <login></login>       
</div>

//专属标签
<template id="study">
        <div>
            <h4>哈哈</h4>
        </div>
</template>


Vue.component("login",{template:"#study"})
const vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
        },
    })

★注意：

1.template标签不能渲染

2.只能有一个根元素

3.组件命不能为存在的标签名

4.多个单词定义是用驼峰，但是使用时用连接符

5.数据隔离

6.可以用components属性定义局部组件，类似于私有定义