首页 > 代码库 > vue2中的slot

vue2中的slot

2024-11-21 03:28:39   203人阅读

最简单的组件

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

<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中使用的时候也一样：

<div id="app">
    <list-item></list-item>
</div>
Vue.component(‘list-item‘, {
    template: ‘<li>这是一个item</li>‘
})

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

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

<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。
<div id="app">
    <three>item1</three>
    <three>item2</three>
    <three>item3</three>
</div>
Vue.component(‘three‘, {
    template: ‘<li><slot></slot></li>‘
})
在没有定义组件内容的时候，可以有默认的内容吗？

可以。在`<slot>` tag中间设置的内容，就是默认的内容。
<div id="app">
    <four></four>
    <four>这是自定义的内容</four>
</div>
Vue.component(‘three‘, {
    template: ‘<li><slot>默认内容</slot></li>‘
})

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

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

<div id="app">
    <five>
        <!-- 指定要插入header这个slot中 -->
        <ul slot="header" class="nav nav-tabs">
          <li class="active"><a href="http://www.mamicode.com/#">Home</a></li>
          <li><a href="http://www.mamicode.com/#">Profile</a></li>
          <li><a href="http://www.mamicode.com/#">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：
<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里面使用这个属性的时候，需要用中划线分词，是中！划！线！我最开始使用的时候，两边都习惯性地使用驼峰，结果死活没有效果。

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

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

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

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

<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
        }
    }
})

 

 

 

 

 






 

vue2中的slot


联系
我们