vue创建组件的几种方法
程序员文章站
2023-02-03 07:58:08
效果： ......
<html>
<head>
<title>vue创建组件</title>
<meta charset="utf-8">
</head>
<body>
<div id="app">
<my-com1></my-com1>
<my-com2></my-com2>
<my-com3></my-com3>
</div>
<div id="app2">
<private></private>
</div>
<template id="temp1">
<div>
<h3>这是通过template元素在外部定义的组件结构</h3>
</div>
</template>
<template id="temp2">
<div>
<h3>这是一个私有组件</h3>
</div>
</template>
</body>
<!-- 这里请引入cdn或者是下载到本地的vue.js -->
<script src="node_modules\vue\dist\vue.js"></script>
<script>
//ps:组件模板只能有一个根元素
//一、创建全局的组件
//方式1 使用中间变量
//1.1使用extend创建
var com1 = vue.extend({
template:'<h3>这是使用vue.extend创建的组件</h3>'
})
//1.2使用vue.component(),定义组件的名称
vue.component('mycom1',com1);//使用驼峰命名是则在引用时就需将大写的字符变为小写，并以-连接两个单词，不使用则引用时标签名与定义一致
//方式2 不使用中间变量
vue.component('mycom2',vue.extend({
template:'<h3>这是使用vue.component创建的组件</h3>'
}))
//更简洁的方式
vue.component('mycom2',{
template:'<h3>这是使用vue.extend创建的组件</h3>'
})
// 方式3 通过在template元素，在被控制的#app外面定义组件的模板
vue.component('mycom3',{
template:'#temp1'
})
let vm = new vue({
el: "#app",
data:{
}
});
//二、创建私有组件
let vm2 = new vue({
el: "#app2",
data:{
},
components:{
private:{
template:"#temp2"
}
}
});
</script>
</html>
效果：