Vue: 组件

Posted 2021-01-18 niuli1987

组件是可复用的 Vue 实例，且带有一个名字

我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

- data必须是函数
- 没有el属性

全局组件 ,不用注册

<div id="app">
    <!--组件应用-->
    <zujianming></zujianming>
</div>


<script>

    // 创建组件
    Vue.component(‘zujianming‘,{
       template:`
       <h1>{{huanying}}</h1>
       `,
        data(){
           return{
               huanying:‘hello vue‘
           }
        }
    });

    // 创建根实例
    new Vue({
        el:‘#app‘
    })


</script>

全局组件

 

局部组件,需要注册, 

components:{}

<style>
        .box{
            width: 50px;
            height: 50px;
            background-color: #5cb85c;
        }
    </style>



<div id="app">
    <!--组件应用-->

</div>


<script>

    // 创建组件
    let Header = {
        template:`
        <div class="box">
            <h1>{{ huanying }}</h1>
        </div>
        `,
        data(){
            return{
                huanying:"hello vue"
            }
        }
    }


    let App = {
        template:`
        <Header></Header>
        `,
        components:{
            ‘Header‘:Header,
        }


    };

    // 注册组件
    new Vue({
        el:‘#app‘,
        template:‘<App></App>‘,
        components:{
            App,
        }
    })


</script>

局部组件