390 vue注册局部组件

<head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <div id="app"> <child></child> <one></one> <two></two> </div> 
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    //  全局组件
    //  Vue.component('child',{
    //      template:`<div> 子组件 :  </div>`
    //  })
    // Vue.filter()

    // 局部组件
    const child = {
        template: `<div>我是局部组件child: {{ msg }}</div>`,
        data() {
            return {
                msg: '哈哈'
            }
        }
    }

    const one = {
        template: `<div>one</div>`
    }
    
    const two = {
        template: `<div>two</div>`
    }

    const vm = new Vue({
        el: '#app',
        data: {},
        filters: {},
        // 注册局部组件
        components: {
            // 如果把局部组件child注释掉，而只留下全局组件child，则会报错: child is not defined
            child, 
            one,
            two
        }
    })
</script>
</body>

posted on 2020-03-20 08:42  冲啊！  阅读(157)  评论(0)  编辑  收藏  举报

导航