component 全局局部组件

最新推荐文章于 2025-08-15 22:56:20 发布

转载最新推荐文章于 2025-08-15 22:56:20 发布 · 102 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jinsuo/p/8481457.html

文章标签：

#javascript #ViewUI

本文通过实例展示了Vue.js中全局与局部组件的区别及使用方法，包括如何定义和注册组件，以及它们在不同范围内的表现。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>template模版</title>
    <meta name="flexible" content="initial-dpr=2,maximum-dpr=3" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta content="yes" name="apple-touch-fullscreen">
     <meta content="telephone=no,email=no" name="format-detection">
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <script src="../assets/js/flexible_css.js"></script>
    <script src="../assets/js/flexible.js"></script>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <div id="app">
        <cai></cai>
         <panda></panda>
    </div>
     <panda></panda>
     <div id="box">
         <cai></cai>
          <panda></panda>    <!-- 局部组件有显示  只会在id为app元素范围内生效 -->

     </div>
</body>
<script type="text/javascript">
    //注册全局组件
    Vue.component('cai',{  ////  全局组件   cai是组件名
        template:`<div style="color:green">全局组件  名字cai</div>`
    })
    var app=new Vue({
            el:"#app",
            data:{
                message:"hello 你好",
            },
            components:{ //局部组件定义   只能用在 id为app的元素范围内
                "panda":{
                    template:`<div style="color:blue">局部注册的panda组件，只能在id为app的标签范围内使用</div>`
                }
            }
    })
    new Vue({
        el:"#box",
    })
    //组件定义两种方法，第一种:注意全局在构造器外面定义   第二种:局部在构造器里面定义  构造器里的components 是加s的，而全局注册是不加s的。
</script>
</html>