Vue.js组件详解-优快云博客

本文链接：https://blog.youkuaiyun.com/EvilKingyhq/article/details/104440189

本文深入解析Vue.js中的组件概念，包括全局与局部组件的区别、组件的定义方式、模板与数据的写法，以及如何在实际项目中应用这些组件。

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

Vue的组件

组件是什么？

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。
组件就是自定义的标签

组件的分类

全局组件:在所有vue实例中(.在它所挂载元素下面有效)有效

局部组件:在自己vue实例中(.在它所挂载元素下面有效)有效

全局组件

语法：
Vue.component(“自定义标签的名字”,{配置对象})
特点：
全局组件可以在任何被挂着的标签中使用.
全局组件的配置对象中必须包含template属性
注意事项：
template中的html必须在一个标签中. 仅且只能有一个根节点
应用场景：
如果该组件的特定功能需要在任何被挂着的标签中使用. 推荐使用全局组件
demoCode:

<body>
<h1>全局组件</h1>
    <div id="myDiv">
        <mycomponet1></mycomponet1>
        <mycomponet2></mycomponet2>
    </div>
    <div id="myDiv1">
        <mycomponet1></mycomponet1>
        <mycomponet2></mycomponet2>
    </div>

    </div>
    <script>
        //定义一个全局组件
        Vue.component('mycomponet1',{
            template:'<H1>测试...</h1>'
        });


        var compontConfig = {
            template:'<h1>乔亮同学</h1>'
        };
        //定义第二个全局组件，并加入对象
        Vue.component('mycomponet2',compontConfig);
        new Vue({
            el:"#myDiv",
            data:{
                msg:'xxx'
            }
        });

        new Vue({
            el:"#myDiv1",
            data:{
                msg:'xxx'
            }
        });
    </script>
</body>

局部组件

语法：

var app = new Vue({
    el: "#app",
    data: {},
    components : {
        "局部组件的名字1" : {组件的配置对象}
        "局部组件的名字2" : {组件的配置对象}
    }
  });

特点：
局部组件只能够在所挂载的标签中使用
demoCode

<body>
<h1>局部组件</h1>
    <div id="myDiv">
        <mycomponet1></mycomponet1>
    </div>
    <div id="myDiv1"><!--不能在不同的挂载中显示-->
        <mycomponet1></mycomponet1>
    </div>

    </div>
    <script>
        //定义一个局部组件
        var app = new Vue({
            el: "#myDiv",
            data: {
            },
            components : {
                "mycomponet1" : {
                    template:'<H1>这是一个局部组件</H1>'
                }
            }
        });
    </script>
</body>

组件模板写法

写法一： 在script标签里面写
写法二： 在template标签里面写
注意： 这两种写法只能适用于局部组件

demoCode

<body>
<h1>组件模板写法</h1>
<div id="myDiv">
    <mycomponet1></mycomponet1>
</div>
<div id="myDiv1">
    <mycomponet1></mycomponet1>
</div>
<!--写法二：可以在template标签里面写-->
     <!--<template id="mytemplate">
        <h2>这是单独提出来的模板template</h2>
     </template>
     -->

<!--可以将模板单独提出来写
    这两种写法只能用在局部组件
-->
<!--写法一：在<script>里面写-->
    <script type="text/template" id="mytemplate">
        <h2>这是单独提出来的模板template</h2>
    </script>

    <script>
        //定义一个局部组件
        new Vue({
            el:"#myDiv",
            components:{
                "mycomponet1":{
                    template:"#mytemplate"
                }
            }
        });

    </script>
</body>

组件数据写法

语法:

"组件的名字":{
			template: "",
			data : function(){
				return {
				  键1:值1,
				  键2:值2
				}
			}
		}

注意事项:
data数据只能够以函数的形式返回,因为函数中可以写其他的业务代码
只能够在各自的组件模板中使用各自的组件中的data数据
Vue对象中的数据不能够在组件中使用. 组件的数据也不能够在挂载的html标签上使用.

 		components:{
               "mycomponent1":{
                   // "template":"#templateStr1"
                   "template":"#templateStr2",
                   //模板是定义数据以下是可行的
                   //1 必须是函数
                   //2 通过return返回数据对象
                   //3 如果有多个数据就是对象对象多个属性及值
                   data(){
                       return {
                           messaage:"jjjj",
                           yhptest:"xxxxxxxxxxxxxx"
                       }
                   }

demoCode

<body>
<h1>组件数据写法</h1>
<div id="myDiv">
    <mycomponet1></mycomponet1>
</div>
<div id="myDiv1">
    <mycomponet1></mycomponet1>
</div>
<template id="myTemplate">
    <form>
        {{name1}}:<input type="text"/><br>
        {{password}}:<input type="text"/>
    </form>
</template>

<script>
    //定义一个全局组件
    Vue.component('mycomponet1',{
        template:'#myTemplate',
        data(){
            return {"name1":"用户名","password":"密码"}
        }
    });
    new Vue({
        el:"#myDiv",
        data:{
            msg:'xxx'
        }
    });
    new Vue({
        el:"#myDiv1",
        data:{
            msg:'xxx'
        }
    });
</script>
</body>