Vue组件的创建和使用
创建格式
1
< template >标签< /template >
2
< script > < /script >
3
< style > < /style >
javascript
<template>
<div>
<h1>组件导入</h1>
<div class="box">
<h3>标题 <button @click="show=!show">{{ show?'y':'n' }}</button></h3>
<ul v-show="show">
<li>xxxx</li>
<li>xxxx</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data(){
return{
show:true,
}
}
}
</script>
<style>
.box {
border: 1px solid #000;
}
</style>
使用组件的四步
创建组件，封装要复用的标签、样式、JS代码把独立的组件封装一个.vue文件中，推荐放到components文件夹
在components文件夹里面创建组件文件
XxxXxx.vue
javascript
//1
<template>
<div>
//封装组件
<div class="box">
<h3>
标题
<button @click="show = !show">{{ show ? "hot" : "cold" }}</button>
</h3>
<ul v-show="show">
<li>xxxx</li>
<li>xxxx</li>
<li>xxxx</li>
<li>xxxx</li>
</ul>
</div>
</div>
</template>
//2
<script>
export default {
data() {
return {
show: true,
};
},
};
</script>
//3
<style>
.box {
border: 1px solid #000;
}
</style>引入组件
javascript
<script>
//引入
import cpt1 from "./components/01-cpt.vue"
export default {
// 注册小组件
components:{
// 自己定义组件名：导入变量名
//cpt1:cpt1,
cpt1,
}
}
</script>注册组件
1. 全局注册
Vue.component("组件名",组件)
javascript
import cpt2 from"./components/02-cpt";//导入
//import 组件对象 from 'vue文件路径'
//全局注册
Vue.component("cpt2",cpt2);
//Vue.component("组件名",组件对象)
2. 局部注册：XxxXxxx.vue文件中
components:{ }
javascript
<script>
import cpt1 from "./components/01-cpt.vue"
export default {
// 全局注册 注册小组件
components:{
// 自己定义组件名：导入变量名(组件对象)
//cpt1:cpt1,
cpt1,
}
}
</script>
使用组件
命名最好使用驼峰,例如
HmHeader 和 HmMain注册使用短横线命名法，例如 hm-header 和 hm-main
使用时< hm-button> < /hm-button>
组件名可使用 :
双标签:<组件名></组件名>
单标签： < XxxXxxx />注意：
组件名
不能和内置的html名相同
javascript
<template>
<div>
<h1>组件导入</h1>
<cpt1></cpt1>
<cpt1></cpt1>
</div>
</template>