vue的组件
- 组件的出现就是为了拆分vue实例中的代码量的，能够以不同的组件来划分不同的功能模块，需要什么样的功能就可以调用相应的模块
- 组件化与模块化的不同：
模块化是从代码的逻辑的角度进行划分的，方便代码分层开发，保证每个功能模块的职能单一
组件化是从UI界面的角度进行划分的，前端的组件化方便UI组件的重用
创建组件
全局组件
- 使用Vue.extend来创建全局的vue组件
var com1=Vue.extend({
template:'<h3>创建组件</h3>'
})
- 通过template属性指定了组件要展示的HTML结构
- Vue.component('组件的名称',创建出来的组件模板对象)
Vue.component('myCom1',com1)
- 使用组件,直接把组件的名字以HTML标签的形式引入页面中，使用驼峰命名大写字母改小写中间加-，不使用驼峰命名直接使用原名称
<my-com1></my-com1>
- 不使用中间变量直接创建组件
Vue.component('myCom1',Vue.extend({
template:'<h3>创建组件</h3>'
}))
- 直接使用Vue.component创建组件
Vue.component('myCom1',{
template:'<h3>创建组件</h3>'
})
- 不论用哪种方式创建出来的组件，组建的template属性指向的模板内容必须有唯一的根元素
- 在被控制的div外面使用template定义组建的HTML模板结构然后在被控制的div中使用
<mycom3></mycom3>
<template id="tmp1">
<div>
<h1>在外部定义组件结构</h1>
<h2>有代码提示和高亮</h2>
</div>
</template>
Vue.component('mycom3',{
template:'#tmp1'
})
私有组件
- 定义实例内部私有组件
components:{
login:{
template:'<h3>私有组件</h3>'
}
}
- 组件可以有自己的data属性，组建的data和实例中的data不一样，实例中的data可以为一个对象，但组件的data必须是一个方法
- 组件中的data除了必须为一个方法之外，这个方法内部必须返回一个对象才行，组件中的data使用方式和实例中的data完全一样
components:{
login:{
template:'<h3>私有组件---{{msg}}</h3>',
data:function(){
return{
msg:'组件中data定义的数据'
}
}
}
}
组件切换
- v-if ，v-else切换组件，缺陷只能在两个组件之间切换
Vue.component('login',{
template:'<h3>登录组件</h3>',
})
Vue.component('register',{
template:'<h3>注册组件</h3>',
})
<button @click.prevent="flag=true">登录</button>
<button @click.prevent="flag=false">注册</button>
<login v-if="flag"></login>
<register v-else="flag"></register>
- compon是一个占位符， ：is属性可以用来指定用来指定要展示组件的名称
<button @click="comName='login'">登录</button>
<button @click="comName='register'">注册</button>
<component :is="comName"></component>
data:{
comName:'register'
},
- 应用切换动画 和mode方式，切换时当组件消失动画完全消失时才会开始组件开始动画
<transition mode="out-in">
<component :is="comName"></component>
</transition>
<style>
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(150px);
}
.v-enter-active,
.v-leave-active{
transition: all 0.5s ease;
}
</style>
父组件向子组件传值
- 父组件可以在引用子组件的时候通过属性绑定（v-bind:）的方式，把需要传递给子组件的数据传递到子组件内部供其使用
components:{
com1:{
template:'<h2>这是子组件----{{parentmsg}}</h2>',
props:['parentmsg']
}
}
<com1 v-bind:parentmsg='msg'><com1>
- props把父组件传递过来的parentmsg属性先在props数组中定义才能使用这个数据
- 父组件向子组件传递方法通过事件绑定（v-on:）的方式
