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>