Vue中的全局组件

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
<my-component>  </my-component>
 
    </div>
    <template id="my-component-template">
        <div>
            <ul>
                <li><a href="">首页</a></li>
                <li><a href="">产品</a></li>
                <li><a href="">公司简介</a></li>
                <li><a href="">联系我们</a></li>
                {{msg}}
            </ul>
        </div>
    </template>
    <script src="vue.js"></script>
    <script>
        //定义全局组件
     Vue.component('my-component',{
        template:'#my-component-template',
           data(){
               return{
                   msg:'我是全局组件'
               }
           }
        })
 
 
        var vm=new Vue({
            el:'#app',
            data:{
                message:'Hello Vue.js!'
            }
 
        })
    </script>
</body>
</html>

posted @ 2024-09-12 14:31 一个人走在路上阅读(3) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue中局部组件

· Vue路由

· Vue 定义全局组件

· 《全局实例篇》Vue.compont注册全局组件

· Vue组件之全局组件与局部组件的使用详解

阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通

公告

记录学习、用在实际，一路前行......

昵称：一个人走在路上
园龄： 2年6个月
粉丝： 0
关注： 5

+加关注

2025年3月

日

一

二

三

四

五

六

zy8899

从0到1，一步一步的走.....

Vue中的全局组件

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>
	<body>
	<div id="app">
	<my-component> </my-component>

	</div>
	<template id="my-component-template">
	<div>
	<ul>
	<li><a href="">首页</a></li>
	<li><a href="">产品</a></li>
	<li><a href="">公司简介</a></li>
	<li><a href="">联系我们</a></li>
	{{msg}}
	</ul>
	</div>
	</template>
	<script src="vue.js"></script>
	<script>
	//定义全局组件
	Vue.component('my-component',{
	template:'#my-component-template',
	data(){
	return{
	msg:'我是全局组件'
	}
	}
	})


	var vm=new Vue({
	el:'#app',
	data:{
	message:'Hello Vue.js!'
	}

	})
	</script>
	</body>
	</html>