Vue全局组件

最新推荐文章于 2024-09-26 10:41:08 发布

huxiaoxiao.

最新推荐文章于 2024-09-26 10:41:08 发布

阅读量8.1k

点赞数 9

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/lolhuxiaotian/article/details/121507775

vue 专栏收录该内容

65 篇文章

订阅专栏

本文详细介绍了在Vue.js中如何定义和使用全局组件，包括基本的文本渲染、数据绑定、事件处理以及组件的复用。通过示例展示了如何创建一个全局组件，并在视图层中调用，强调了data属性的正确使用方式以及组件复用的特性。

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

在Vue中我们可以自己定义(注册)全局组件

定义组件名的方式：

Vue.component("全局组件的名称",{一个对象})

组件的使用方式：假设我定义了一个全局组件，名称为 myhead

   <div id="app">
        <myhead></myhead>
    </div>

全局组件的基本使用：

1.可以直接在组件中渲染文本:

注意：为了方便对标签的识别，推荐在 template 后使用模板字符串


        Vue.component("myhead",{
            template:`
                <div>
                    <p>全局组件的调用</p>
                </div>
            `
        })

在视图层调用：

 <div id="app">
     <myhead></myhead>
 </div>

输出结果为：

2.有同样的 data 数据中心，在 template 中可以渲染数据中心的数据

注意点：在Vue实例中，data 数据中心是一个对象

在vuejs组件中，我们要求data必须返回一个函数，不能是一个对象，要有返回值


        Vue.component("myhead",{
            template:`
                <div>
                    <p>全局组件的调用</p>
                    <p>{{mes}}</p>
                </div>
            `,
            data(){
                return {
                    mes:"同样的可以渲染数据"
                }
            }
        })

输出结果为：

3.可以绑定事件指令


        Vue.component("myhead",{
            template:`
                <div>
                    <p>{{num}}</p>
                    <input type="button" value="点击num加一" @click="num++">
                </div>
            `,
            data(){
                return {
                    num:1
                }
            }
        })

输出结果为：

4.全局组件的复用：

可以在视图层多次调用同一个全局组件，组件之间互不影响

  <div id="app">
        <!-- 再视图层 使用组件 -->
        <myhead></myhead>

        <!-- 组件的复用(可以被调用很多次，互不影响) -->
        <myhead></myhead>
        <myhead></myhead>
        <myhead></myhead>
    </div>

查看结果：