全局组件与数据通信-优快云博客

本文详细介绍了Vue中全局组件的定义与使用，展示了如何通过Vue.component注册全局组件，并直接在HTML中复用。同时，文章深入探讨了组件间的数据通信机制，包括子组件与父组件之间的信息交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

全局组件

<script src="./static/vue.min.js"></script>  // 导入vue

<body>
<div id="app"></div>
<script>
    Vue.component('global-component', {
        template: `
            <div>
                <h3>{{ wanrong }}</h3>
                <h2>{{ wanrong }}</h2>
            </div>
        `,
        data() {
            return {
                wanrong: 'Hello Wanrong',
            }
        },
    });

    new Vue({
        el: '#app',
        template: `<global-component></global-component>`,
    })

</script>
</body>

　　全局组件不用再根实例中注册，可以直接在div标签中使用。

<body>
<div id="app">
    <global-component></global-component>
</div>
<script>
    Vue.component('global-component', {
        template: `
            <div>
                <h3>{{ wanrong }}</h3>
                <h2>{{ wanrong }}</h2>
            </div>
        `,
        data() {
            return {
                wanrong: 'Hello Wanrong',
            }
        },
    });

    new Vue({
        el: '#app',
    })

</script>
</body