vue 组件 component

组件的使用，可以方便复用和后期的维护

vue的组件分成2种，全局组件和局部组件

简单举个例子

<body>
    <div id="test">
        <hello-world></hello-world>
    </div>

    <script>
        Vue.component('helloWorld', {
             template: `<div><span>hello world!</span></div>`
        })

        var vm = new Vue({
            el: '#test',
        })
    </script>
</body>

页面输出内容

 

 页面元素

 

 这里component有2个参数，一个是组件名，另一个是组建的配置、参数，是个对象

 

或者这样写

 Vue.component('helloWorld', {
            data() {
                return {
                    msg: 'hello world!'
                }
            },
            template: `<div><span>{{ msg }}</span></div>`
        })

        var vm = new Vue({
            el: '#test',
        })

输出结果是一样的

这里的data（）相当于data:{},只是在组件里，data是个函数

posted @ 2019-09-09 14:52  一颗糊涂淡  阅读(743)  评论(0)  编辑  收藏  举报