Vue.js
话题列表 社区 Wiki 优质外文 招聘求职 Vue.js 实战教程 社区文档
登录
注册

Vue 组件用法

Ozzie 的个人博客 / 0 / 1 / 创建于 5年前 / 更新于 5年前

本文纲领：

  • 介绍 Vue组件 的相关概念
  • 详解 Vue组件 的用法

Vue组件 ：介绍

  1. 官方文档：组件应用化构建
  2. 什么是组件：组件（Component）是 可复用的Vue实例，是Vue最强大的功能之一，组件可以拓展HTML元素，封装可重用的代码（包括html、css、js）。在较高层上时，组件是自定义元素，Vue编译器为它提供特殊的功能，总结起来就是：组件是完成特定功能的一套自定义的HTML标签。可以将其理解为预先定义好的 ViewModel类。
  3. 一个组件可以预先定义很多内容，但是最核心的有：
    • 模板（template）：模板反映了数据和最终展现给用户的DOM之间的映射关系，也就是我们要复用的 HTML模板
    • 初始数据（data）：一个组件的初识数据状态，对于可重用的组件来说，通常是私有的。
    • 接收的外部的参数（props）：组件之间可以通过参数来进行数据的传递和共享，参数默认是单向绑定，但也可以实现双向绑定。
    • 生命周期（钩子函数）：一个组件会触发多个生命周期函数，在这些钩子函数中可以封装一些自定义逻辑。
  4. 组件的分类：
    • 全局组件、局部组件、嵌套组件、单文件组件

组件三步曲：定义、注册、使用

全局组件

  1. 简单介绍全局组件：
    • 全局组件即为所有的 Vue实例 都可以使用的组件。
    • 注册全局组件的方法： 
       Vue.component('组件名',{
      '模板和方法'
 }) //注意:组件名不要有大写字母，多个单词使用中划线 '-'隔开
    • 组件的template模板必须有且仅有一个根标签，即在template中，所有的内容都要用一个标签包裹起来。
    • 应用场景：若该组件的功能需在任何被Vue实例挂载的标签中引用，则建议用全局组件
    • 注意：全局组件必须写在Vue实例创建之前，才会在引用中生效，否则会报错
  2. 全局组件的三种用法： 
     <!DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 导入Vue包 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <!-- 组件三部曲：定义、注册、引用 -->
        <h1>全局组件</h1>
        <hr >
    <!-- ======================= 引用全局组件:方式1 ======================= -->
        <div id="A">
            <compon1></compon1> <!--使用-->
            <hr >
        </div>
        <script type="text/javascript">
            Vue.component('compon1', {  //注册
                template: '<h2>引用全局组件:方式1</h2>' //定义
            })
            var A = new Vue({
                el: '#A',
            })
        </script>
    <!-- ======================= 引用全局组件:方式2 ======================= -->
        <div id="B">
            <compon2></compon2> <!--使用-->
        </div>
        <script type="text/template" type="text/javascript" id="compon2">
        /* 定义组件(这个div是根标签) */
            <div>
                <h2>引用全局组件:方式2</h2>
                <p>我是通过'script'标签定义的</p>
                <hr >
            </div>
        </script>
        <script type="text/javascript">
            Vue.component('compon2',{   //注册
                template: '#compon2',   //定义
            })
            var B = new Vue({
                el: '#B',
            })
        </script>
    <!-- ======================= 引用全局组件:方式3 ======================= -->
        <div id="C">
            <compon3></compon3> <!--使用-->
        </div>
        <template id="compon3">
            <!-- 定义(这个div是根标签) -->
            <div>
                <h2>引用全局组件:方式3</h2>
                <p>我是通过'template'标签定义的</p>
                <hr >
            </div>
        </template>
        <script type="text/javascript">
            Vue.component('compon3',{   //注册
                template: '#compon3'    //定义
            })
            var C = new Vue({
                el: '#C',
            })
        </script>
    </body>
 </html>

局部组件

  1. 简单介绍局部组件：
    • 个人认为局部组件的优点是相对于全局组件而言的，例如，当你使用 webpack 这样的构件系统时，如果注册的是全局组件，就意味着不管你是否使用，此组件都会存在于你构件的系统中，造成无谓的 js加载，而局部组件只需要在你的根实例里面去调用这个定义的组件即可。
    • 与全局组件一样，组件的template模板必须有且仅有一个根标签，即在template中，所有的内容都要用一个标签包裹起来。
  2. 局部组件的三种用法： 
     <!DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 导入Vue包 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <!-- 组件三部曲：定义、注册、引用 -->
        <h1>局部组件——定义在某个Vue实例上的</h1>
        <hr >
    <!-- ======================= 引用局部组件:方式1 ======================= -->
        <div id="A">
            <compon1></compon1> <!--引用-->
            <hr >
        </div>
        <script type="text/javascript">
            var A = new Vue({
                el: '#A',
                components: { //注册
                    'compon1': { //定义
                        template: '<h2>引用局部组件:方式1</h2>'
                    }
                }
            })
        </script>
    <!-- ======================= 引用局部组件:方式2 ======================= -->
        <div id="B">
            <compon2></compon2> <!--引用-->
            <hr >
        </div>
        <script type="text/template" id="compon2">
            //定义组件(这个div是根标签)
            <div>
                <h2>引用局部组件:方式2</h2>
                <p>我是通过'script'标签定义的</p>
            </div>
        </script>
        <script type="text/javascript">
            var B = new Vue({
                el: '#B',
                components: { //注册
                    'compon2': { //定义
                        template: '#compon2'
                    }
                },
            })
        </script>
    <!-- ======================= 引用局部组件:方式3 ======================= -->
        <div id="C">
            <compon3></compon3> <!--引用-->
            <hr >
        </div>
        <template id="compon3">
            <!-- 定义组件(这个div是根标签) -->
            <div>
                <h2>引用局部组件:方式3</h2>
                <p>我是通过'template'标签定义的</p>
            </div>
        </template>
        <script type="text/javascript">
            var C = new Vue({
                el: '#C',
                components: { //注册
                    compon3: { //定义
                        template: '#compon3',
                    }
                }
            })
        </script>
    </body>
 </html>

组件嵌套

  1. 简介：如下图所示，组件之间是可以相互嵌套的：
    在这里插入图片描述
  2. 父组件中嵌套子组件的方法： 
     <div id="container">
    <h3>我爱吃什么水果有这些：</h3>
    <ol>
        <todolist></todolist> <!-- 引用 -->
    </ol>
 </div>
 <script type="text/javascript">
    //定义子组件
    var child = Vue.extend({
        template: "<div>嵌套的子组件</div>",
    });
    //定义父组件
    var todolist = Vue.extend({
        template:'<div><li v-for="item in datas">{{item.text}}</li><child></child></div>',
        data(){
            return{
                datas: [
                    { id: 0, text: '苹果' },
                    { id: 1, text: '香蕉' },
                    { id: 2, text: '雪梨' },
                ]
            }
        },
        components: {
            'child': child,
        }
    });
    //定义一个Vue实例
    var app = new Vue({             
    el: '#container',
        data: {},
        components: { //注册(当然也可以用"Vue.component('todolist',todolist);"全局注册)
            'todolist': todolist,
        }
    })
 </script>
    • 注意：在使用子组件之前必须先定义子组件，否则会报错
  3. 组件中的数据必须是函数，组件中的数据的定义为： 
    '组件名':{
    template: "...",
    data: function(){
        return {
            键 : 值,
        }
    }
}
    • 为什么这里的data的值是一个函数呢，因为我们这里定义的组件很有可能被复用，如果像普通的一个Vue实例，那么改动一个地方，就会引起整个组件的改变
      但是我们每次复用组建的情况都可能不同，所以用一个function来返回对象
      • 换句话说，组件的data是私有的，该data中的数据只能在对应的组件模板中使用
Vue.js
本作品采用《CC 协议》，转载必须注明作者和本文链接
Ozzie
81 声望
That's the price I pay...
讨论数量: 1
排序：
时间 投票
autmoon
0 声望

大佬，我有个疑问，Vue.component注册的组件里可以嵌套组件吗？ Vue.component('compon3',{ //注册 template: '#compon3' //定义 }， components: { 'child': child, })

4年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！
支持 MD 帮助
Ozzie
未填写
文章
24
粉丝
7
喜欢
35
收藏
12
排名：726
访问：9914
私信
所有博文
文章归档
3 篇 2020 年 4 月 3 篇 2020 年 2 月 3 篇 2020 年 1 月 13 篇 2019 年 12 月 2 篇 2019 年 11 月
最新文章 最受欢迎
4年前 删除排序数组中的重复项 4年前 反转字符串（JavaScript） 4年前 Redux 入门 Demo：TodoList 5年前 Next.js 入门超详解教程 5年前 Windows 神器：Cmder
3 v-on 及其事件修饰符 3 Vue 组件用法 3 Next.js 入门超详解教程 3 Windows 神器：Cmder 2 Vue - 按键修饰符 && 系统修饰符
博客标签
javascript
4
 webpack
3
 算法
2
 node.js
3
 Vue.js
6
 开发工具
2
 React.js
3
社区赞助商
成为赞助商

关于 LearnKu

LearnKu 是终身编程者的修道场
做最专业、严肃的技术论坛
LearnKu 诞生的故事

资源推荐

  • 《社区使用指南》
  • 《文档撰写指南》
  • 《LearnKu 社区规范》
  • 《提问的智慧》

    • 服务提供商

    其他信息

  • 成为版主
  • 所有测验
  • 联系站长（反馈建议）

    • 粤ICP备18099781号-6 | 粤公网安备 44030502004330号 | 违法和不良信息举报

    由 Summer 设计和编码 ❤

    请登录

    内容举报
    匿名举报，为防止滥用，仅管理员可见举报者。

    我要举报该，理由是：

    取消