Vue 2 | Part 7 组件

时间 2019-12-12

标签 vue 组件繁體版

原文原文链接

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

最简单的组件

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

<body>
    <div id="app">
        <one></one>
    </div>
</body>

Vue.component('one', {
    template: '<li>这是一个item</li>'
})

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

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

<div id="app">
    <list-item></list-item>
</div>

Vue.component('list-item', {
    template: '<li>这是一个item</li>'
})

组件的内容能够从数据获取吗？

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

<div id="app">
    <two></two>
</div>

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

组件的内容能够在HTML里面定义吗？

能够。在组件中使用<slot>吧。在HTML的组件中间定义的内容，就会被插入到<slot> tag的位置中去。除了直接定义文字以外，固然也能够写HTML。java

<div id="app">
    <three>item1</three>
    <three>item2</three>
    <three>item3</three>
</div>

Vue.component('three', {
    template: '<li><slot></slot></li>'
})

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

能够。在<slot>tag中间设置的内容，就是默认的内容。git

<div id="app">
    <four></four>
    <four>这是自定义的内容</four>
</div>

Vue.component('three', {
    template: '<li><slot>默认内容</slot></li>'
})

若是我想在不一样的位置插入不一样的内容呢？

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

<div id="app">
    <five>
        <!-- 指定要插入header这个slot中 -->
        <ul slot="header" class="nav nav-tabs">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Profile</a></li>
          <li><a href="#">Messages</a></li>
        </ul>

        <!-- 指定要插入content这个slot中 -->
        <div slot="content">this is my awesome website</div>
    </five>
</div>

Vue.component('five', {
    template:
        '<div>' +
            '<div class="top-nav">' +
                // 设置slot的名称为header
                '<slot name="header"></slot>' +
            '</div>' +
            '<div class="main">' +
                // 设置slot的名称为content
                '<slot name="content"></slot>' +
            '</div>' +
        '</div>'
})

图片中选中的这一行，由于在HTML中指定slot的时候使用了div tag因此文字被它包了起来，若是但愿直接插入文字，可使用template这个tag：web

<div id="app">
    <five>
        <ul slot="header" class="nav nav-tabs">
            <!-- ... -->
        </ul>

        <!-- 改成使用template tag -->
        <template slot="content">this is my awesome website</template>
    </five>
</div>

既然组件至关于自定义了一个tag，那能够自定义tag的属性吗？

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

<div id="app">
    <six user-name="john"></six>
</div>

Vue.component('six', {
    props: ['userName'],
    template: '<li>{{ userName }}</li>'
})

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

能够。咱们用计算属性作例子吧。把属性设定的文字转换为全大写。ide

<div id="app">
    <six user-name="john"></six>
</div>

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

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

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

<div id="app">
    <input type="text" v-model="inputMsg" />
    </br>
    <six :user-name="inputMsg"></six>
</div>

Vue.component('six', {
    props: ['userName'],
    template: '<li>{{ uppercaseName }}</li>',
    computed: {
        uppercaseName: function() {
            return this.userName.trim().toUpperCase()
        }
    }
})

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

能够在组件里面直接使用另一个组件吗？

固然能够。咱们直接上例子吧：

<div id="app">
    <game-list></game-list>
</div>

Vue.component('game-list', {
    template:
        '<ul>' +
            // 直接使用第三个组件进行循环
            '<three v-for="game in games">{{ game.name }}</three>' +
        '</ul>',
    data: function () {
        return {
            games: window.games
        }
    }
})

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

写在最后

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

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