• 首页

  • 官方

  • 主题

  • 关注

  • 联系

vue3写组件以满足多个页面引用大段相同代码,如菜单等(直接使用<script>引入vue.js)

vue3写组件以满足多个页面引用大段相同代码,如菜单等(直接使用<script>引入vue.js)

模板代码如下(注意和vue2的写法有一点儿不一样):

<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <meta name ="viewport" content ="width = device-width" />
    <title>gxg</title>
    <script type="text/javascript" src="https://unpkg.com/vue@next"></script><!-- 引入vue最新版 -->
    <style lang="css">
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="gxg" v-cloak>
        <gxg index='戈小戈vue3组件模板'></gxg><!-- 这里使用index传入参数 -->
    </div>


	<script type="text/javascript">
			const ComponentsApp = {}
			const gxg = Vue.createApp(ComponentsApp)
        // 下面添加组件代码,'gxg'是自定义的标签,相当于div,pros里的['index']是自定义传入参数,template里的是遇到gxg标签时渲染出的代码。
			gxg.component('gxg', {
				props: ['index'],
				template: `<div>{{index}}</div>`
			})
			gxg.mount('#gxg')//vue挂载到id="gxg"的DOM上
	</script>
</body>
</html>


posted @ 2021-10-15 18:41  戈小戈  阅读(612)  评论(0编辑  收藏  举报