vue中的几种组件

68 阅读 0 评论 45 点赞

我是靠谱客的博主和谐水壶，最近开发中收集的这篇文章主要介绍vue中的几种组件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1、模版在字符串中

<div id="app">
    <todoitem></todoitem>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component('todoitem',{
        template:'<div>Component</div>'
    });
    new Vue({
        el:'#app'
    });

</script>

2、script标签

<div id="app">
    <todoitem></todoitem>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/x-template" id="myTemplate2">
<div>
    Component2
</div>
</script>
<script>
    Vue.component('todoitem',{
        template:'#myTemplate2'
    });
    new Vue({
        el:'#app'
    });

</script>

3.template标签

<div id="app">
    <todoitem></todoitem>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<template id="myTemplate3">
    <div>
        Component3
    </div>
</template>
<script>
    Vue.component('todoitem',{
        template:'#myTemplate3'
    });
    new Vue({
        el:'#app'
    });

</script>

4.单文件组件

这种方法常用在vue单页应用中。详情看官网：https://cn.vuejs.org/v2/guide/single-file-components.html
创建.vue后缀的文件,组件Hello.vue，放到components文件夹中

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
    </div>
</template>

<script>
    export default {
        name: 'hello',
        data () {
            return {
                msg: '欢迎！'
            }
        }
    }
</script>


app.vue

<!-- 展示模板 -->
<template>
    <div id="app">
        <img src="./assets/logo.png">
        <hello></hello>
    </div>
</template>

<script>
    // 导入组件
    import Hello from './components/Hello'

    export default {
        name: 'app',
        components: {
            Hello
        }
    }
</script>
<!-- 样式代码 -->
<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>
</body>