Vue 2 | Part 7 组件

xcold 发布于2019-08-20 13:56 / 666人阅读

摘要：因为这里会举一连串的例子，就直接用来作为组件名称了。这是一个组件名称定义的时候有一点需要注意的，就是要使用中划线分词。在组件的方法里面返回数据就可以了。在的组件中间定义的内容，就会被插入到的位置中去。敬请期待下一期，组件通信。

界面写多了，大家应该都会想到一个问题：JS的模块写好以后可以在多个地方重复使用，HTML有没有办法做到呢？Vue给了我们这个能力，使用组件，就可以轻松做到。

最简单的组件

初始化Vue实例之前，使用Vue.component方法注册一个简单的template，在HTML中，就可以直接使用。因为这里会举一连串的例子，就直接用one、two、three来作为组件名称了。

Vue.component("one", {
    template: "这是一个item"
})

var app = new Vue({
    el: "#app"
})

组件名称定义的时候有一点需要注意的，就是要使用中划线分词。比方说，我想新建一个叫list item的组件，组件的名称就需要是list-item，在HTML中使用的时候也一样：

Vue.component("list-item", {
    template: "这是一个item"
})

组件的内容可以从数据获取吗？

可以。在组件的data方法里面返回数据就可以了。跟Vue实例不一样的是，组件的data对应一个function，在组件中想要用到的数据，需要从这个方法里面返回（返回的数据类型是对象）。

Vue.component("two", {
    template: "{{ listItem.name }}",
    data: function () {
        return {
            // 在html中引入gamesDB.js
            listItem: window.games[0]
        }
    }
})

组件的内容可以在HTML里面定义吗？

可以。在组件中使用吧。在HTML的组件中间定义的内容，就会被插入到 tag的位置中去。除了直接定义文字之外，当然也可以写HTML。


    item1
    item2
    item3

Vue.component("three", {
    template: ""
})

在没有定义组件内容的时候，可以有默认的内容吗？

可以。在tag中间设置的内容，就是默认的内容。


    
    这是自定义的内容

Vue.component("three", {
    template: "默认内容"
})

如果我想在不同的位置插入不同的内容呢？

使用具名吧。在template里面设置好每个slot的名称，在HTML中通过slot属性指定内容要插入到哪个具名中。详情请看下面的代码片段和注释。


    
        
        
          Home
          Profile
          Messages
        

        
        this is my awesome website

Vue.component("five", {
    template:
        "" +
            "" +
                // 设置slot的名称为header
                "" +
            "" +
            "" +
                // 设置slot的名称为content
                "" +
            "" +
        ""
})

图片中选中的这一行，因为在HTML中指定slot的时候使用了div tag所以文字被它包了起来，如果希望直接插入文字，可以使用template这个tag：

既然组件相当于自定义了一个tag，那可以自定义tag的属性吗？

可以的。使用component的props来设置吧。这里有一点千万要记得，在props里面，是驼峰式分词，但是，在HTML里面使用这个属性的时候，需要用中划线分词，是中！划！线！我最开始使用的时候，两边都习惯性地使用驼峰，结果死活没有效果。最后才发现官方文档有说明……

Vue.component("six", {
    props: ["userName"],
    template: "{{ userName }}"
})

从属性传入的数据，组件内可以进行处理吗？

可以。我们用计算属性做例子吧。把属性设定的文字转换为全大写。

Vue.component("six", {
    props: ["userName"],
    // 最后template中使用的是计算属性
    template: "{{ uppercaseName }}",
    computed: {
        uppercaseName: function() {
            return this.userName.trim().toUpperCase()
        }
    }
})

这些自定义的属性也可以用v-bind指令吗？

YES！直接用官方的一个双向数据绑定的例子吧：

Vue.component("six", {
    props: ["userName"],
    template: "{{ uppercaseName }}",
    computed: {
        uppercaseName: function() {
            return this.userName.trim().toUpperCase()
        }
    }
})

var app = new Vue({
    el: "#app",
    data: {
        inputMsg: ""
    }
})

可以在组件里面直接使用另外一个组件吗？

当然可以。我们直接上例子吧：

Vue.component("game-list", {
    template:
        "" +
            // 直接使用第三个组件进行循环
            "{{ game.name }}" +
        "",
    data: function () {
        return {
            games: window.games
        }
    }
})

这期的基本上把组件的基础都过了一遍，视频里面会附加套用boostrap的css做一个自己的组件的内容。敬请期待下一期，组件通信。

写在最后

源码地址：https://github.com/levblanc/v...

视频攻略：小的不才，为求一赞，自制本期视频攻略在此。

私有云 idc机房托管 Part-2 vue组件 vue组件开发 vue父子组件通讯

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81328.html

Vue 2 | 基础API系列文章合集

摘要：在大家的鞭策和鼓励下，这个基础的系列终于完成了。关于更新的频率，因为是我自己一个人在做，文案视频都准备好了才发的话，最快也只能一周一更。最后这几期可以密集地更新，完全是因为公司放假了。不过月份的更新速度真的不能保证，抱歉。在大家的鞭策和鼓励下，这个基础API的系列终于完成了。所幸是没有真的更到一百期才完结（笑）。最初是因为觉得录视频好玩，才挖的这个坑。也想过中途放弃，关掉专栏，但由于...

instein 2019-08-20 14:00 评论0 收藏0
Vue.js应用性能优化：第一部分---介绍性能优化和懒加载

摘要：我的目标是使本系列成为关于应用程序性能的完整指南。代码分割就是将应用程序分割成这些延迟加载的块。总结延迟加载是提高应用程序性能并减少其大小的最佳方法之一。在本系列的下一部分中，我将向您展示如何使用和路由来分割应用程序代码。当移动优先（mobile-first）的方式逐渐成为一种标准，而不确定的网络环境因素应该始终是我们考虑的一点，因此保持让应用程序快速加载变得越来越困难。在本系列文章...

ZweiZhao 2019-08-26 18:27 评论0 收藏0
Vue.js应用性能优化：第二部分---路由懒加载和 Vendor bundle 反模式

摘要：现在，我们将更深入地研究，并学习用于分割应用程序最实用的模式。本系列文章基于对性能优化过程的学习。路径时才被下载。为了便于理解，文件名称并不是由生成的真实名称。接下来，我们将学习其他部分和单独的组件也能够从主文件分割出来并延迟加载。在前一篇文章中，我们学习了什么是代码分割，它是如何与 Webpack 一起工作的，以及如何在Vue应用程序中使用延迟加载。现在，我们将更深入地研究，并学习...

0x584a 2019-08-26 13:45 评论0 收藏0
Vue.js应用性能优化：第三部分-延迟加载Vuex模块

摘要：静态模块不能被取消注册也不能延迟注册，并且在初始化后不能更改静态模块的结构不是状态。为此，我们将在路由对应的组件中加载模块，而不是在中导入并注册它。能代码分割模块是一个强大的工具。在前一部分，我们学习了足够强大的模式，可以显着提高应用程序的性能 - 按每个路由分割代码。虽然按路由分割代码非常有用，但是在用户访问我们的站点后，仍然有很多代码是不需要的。在本系列的这一部分中，我们将重点关...

charles_paul 2019-08-26 13:50 评论0 收藏0
VUE - MVVM - part12 - props

摘要：看这篇之前，如果没有看过之前的文章，移步拉到文章末尾查看之前的文章。而该组件实例的父实例却并不固定，所以我们将这些在使用时才能确定的参数在组件实例化的时候传入。系列文章地址优化优化总结看这篇之前，如果没有看过之前的文章，移步拉到文章末尾查看之前的文章。前言在上一步，我们实现 extend 方法，用于扩展 Vue 类，而我们知道子组件需要通过 extend 方法来实现，我们从测试例...

bluesky 2019-08-22 17:07 评论0 收藏0