Vue2 组件注册

最新推荐文章于 2025-10-23 10:13:38 发布

原创最新推荐文章于 2025-10-23 10:13:38 发布 · 140 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

43 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="Vue-v2.5.22.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
    <my-component></my-component>
    <my-parent></my-parent>

    <my-component2></my-component2>
    <my-parent2></my-parent2>
</div>

<script type="text/javascript">
    // 全局注册
    let MyComponent = Vue.extend({
        template: '<p>This is a component</p>'
    });

    Vue.component('my-component', MyComponent);

    // 局部注册
    let Child = Vue.extend({
        template: '<p>This is a child component</p>'
    });

    let Parent = Vue.extend({
        template: '<div>\
        <p>This is a parent component</p>\
        <my-child></my-child>\
        </div>',
        components: { //注意加 s
            'my-child': Child
        }
    });

    Vue.component('my-parent', Parent);

    // 简化方式
    // 全局注册
    Vue.component('my-component2',
        {
            template: '<p>This is a component</p>'
        });
    // 局部注册
    Vue.component('my-parent2',
        {
            template: '<div>\
        <p>This is a parent component</p>\
        <my-child2></my-child2>\
        </div>',
            components: { //注意加 s
                'my-child2': {
                    template: '<p>This is a child component</p>'
                }
            }
        });

    let vm = new Vue({
        el: '#app',
    })
</script>
</body>
</html>