vue组件
组件基础知识:
-
什么是组件
组件是功能完整,具有复用性的独立模块, -
为什么需要组件化
代码复用,提高开发效率,节省成本 -
组件三要素:
- 结构 :HTML
- 样式 :CSS
- 功能 :JS JQuery Vue
-
组件内部配置
template——模板内容,即组件内部的内容,也是自定义标签对中的内容
data(){ return{} }——必须是个函数? 为了避免组件多次调用,data互相影响
props——外部传入组件内部的数据
computed——计算属性
watch——监听
methods——函数方法
directives——指令
components——组件
created ——生命周期 -
根元素:
vue强制要求每一个实例都要有根元素(vue组件本质上就是一个vue实例),如下所示代码会报错。
<div id="app">
<my-list></my-list>
</div>
<script>
Vue.component('my-list',{
template:`
<p>段落标签1</p>
<p>段落标签2</p>`
})
new Vue({
el:'#app',
data:{
}
})
</script>
运行结果:
正确写法:
<script>
Vue.component('my-list',{
template:`
<div>
<p>段落标签1</p>
<p>段落标签2</p>
</div>
`
})
new Vue({
el:'#app',
data:{
}
})
</script>
注册全局组件:在实例化vue对象前注册的组件是全局组件, 注册之后可以用在任何新创建的 Vue 实例化对象中。
语法格式:
Vue.component('组件名称',{
template:`组件内容`,
data(){
return {
存储数据
}
}
})
<style>
.box{
width: 300px;
}
.box input{
width: 100%;
height: 30px;
}
.box li{
list-style: none;
height: 30px;
padding: 10px;
}
ul{
padding: 0;
background-color: #d8d8d8;
}
.box li:hover{
background-color: orchid;
}
</style>
<div id="app">
<!-- 调用定义的全局组件 -->
<my-list></my-list>
</div>
<script>
// 全局组件:在实例化vue对象前定义的组件
Vue.component('my-list',{
template:`
<div class="box">
<input type="text">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</div>
`
})
new Vue({
el:'#app',
data:{}
})
</script>
运行结果:
全局组件定义之后创建的任何vue实例中都可以调用该组件。
注册局部组件:在实化对象中注册的组件称为局部组件,这样组件只能在当前这个实例中使用
语法格式:
new Vue({
components:{
'组件名称':{
template:`组件内容`,
data(){
return {
数据
}
}
}
}
})
<!-- css样式代码同上 -->
<div id="app">
<!-- 调用定义的局部组件 -->
<my-list></my-list>
</div>
<div id="app1">
<!-- 此处调用会报错 -->
<my-list></my-list>
</div>
<script>
new Vue({
el:'#app',
data:{},
components:{
'my-list':{
template:`
<div class="box">
<input type="text">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</div> `
}
}
})
new Vue({
el:'#app1',
data:{}
})
</script>
运行结果:
在第一个vue实例中定义的局部组件,可以成功调用;在第二个vue容器中调用会报错。
全局组件数据交互:
实现效果:
- ul列表默认情况下隐藏
- input获取焦点时显示ul,失去焦点隐藏ul
- 鼠标单击li标签时,标签的内容传入input输入框
<!-- css样式代码同上 -->
<div id="app">
<my-list></my-list>
</div>
<script>
// 注册全局组件
Vue.component('my-list',{
// template中定义组件的结构
template:`
<div class="my-list">
<input
type="text"
v-model="msg"
@focus="isShow = true"
@blur="isShow = false"
>
<ul v-show="isShow">
<li
v-for="(item,index) in list"
@mousedown="handleList(item)"
>{{item}}</li>
</ul>
</div>
`,
data() {
return {
list:['HTML','CSS','JS'],
msg:'',
isShow:false,
}
},
methods: {
handleList(str) {
this.msg = str
}
},
})
new Vue({
el:'#app',
data:{}
})
</script>
运行结果: