vue中的组件
Posted feixiangdecainiao
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue中的组件相关的知识，希望对你有一定的参考价值。
为了拆分Vue实例中的代码量，以不同的组件划分不同的功能，使用功能的时候直接调用相关的额组件就行了
模块化：从代码的逻辑角度进行划分的，方便代码的分层开发，每个模块的只能单一
组件化：从ui界面的角度进行划分的，方便ui间的复用
组件的实现方式
方式一：
var com1=Vue.extend({ template:‘<h3>这是使用Vue.extend属性创建的组件</h3>‘//通过template属性，指定组件需要展示的html结构 }) // 使用vue.component(‘组建的名称‘,创建出来的组件模板对象) Vue.component(‘mycom1‘,com1)
使用
<!-- 使用的时候直接当做HTML标签的形式使用，注意在驼峰的命名方式中名字需要改成 -小写 --> <mycom1></mycom1>
方式二：
Vue.component(‘mycom2‘,{ // 注意组件只能有唯一的根元素,有且仅有一个根元素 template: ‘<div><h1>这是使用h1创建的</h1><span>123</span></div>‘ })
方式三：
直接控制一个template标签对象，这种方式可以写的时候有提示
Vue.component(‘mycom3‘,{ template: ‘#tmpl‘ })
<template id="tmpl">
<div>
<h1>这是通过template元素定义的组件结构</h1>
</div>
</template>
el data methods filters directivess beforecreate
私有组件的使用
components:{ login: { //template:‘<h1>私有组件</h1>‘ template: ‘#temp‘ } }
组件中的数据
Vue.component(‘mycom1‘,{ // 组件可以有自己的数据，组件的data和实例的data有点不一样，实例中的data可以是一个对象 // 组建中的data必须是一个方法 // 方法内部号必须返回一个对象 // 组建中的数据和实例中的data使用方式完全一样，使用插值表达式 template: ‘<h1>这是全局组件---{{msg}}</h1>‘, data: function(){ return { msg:‘这是组件自己的数据‘ } } })
自定义的组件实现按钮加一并且显示的功能，
<div id="app">
<counter></counter>
</div>
<template id="temp">
<div>
<input type="button" value="+1" @click="increment">
<h3>{{count}}</h3>
</div>
</template>
<script>
Vue.component(‘counter‘, {
template: ‘#temp‘,
data: function () {
return {
count:0
}
},
methods:{
increment(){
this.count++
}
}
})
var vm = new Vue({
el: ‘#app‘,
})
v-if和v-else实现点击相应的标签实现登录和注册界面的简单切换
<div id="app">
<a href="" @click.prevent="flag=true">登录</a>
<a href="" @click.prevent="flag=false">注册</a>
<login v-if="flag"></login>
<register v-else="flag"></register>
</div>
<script>
Vue.component(‘login‘,{
template:‘<h3>登录组件</h3>‘
})
Vue.component(‘register‘,{
template:‘<h3>注册组件</h3>‘
})
var vm =new Vue({
el:‘#app‘,
data:{
flag:true
}
})
</script>
实现组件切换的第二种形式
使用vue提供的component来指定需要放置的组件，里面有个属性需要放置组件的名字，这里我们将其放上一个VM中定义的变量，这样在不同的点击事件中将不同的组件名字赋予变量，这样来实现组件的切换
<div id="app">
<a href="" @click.prevent="comName=‘login‘">登录</a>
<a href="" @click.prevent="comName=‘register‘">注册</a>
<!-- 在这里指定需要展示组建的名称 -->
<component :is="comName"></component>
</div>
<script>
Vue.component(‘login‘,{
template:‘<h1>登录组件</h1>‘
})
Vue.component(‘register‘,{
template:‘<h1>注册组件</h1>‘
})
var vm= new Vue({
el: ‘#app‘,
data: {
comName:‘login‘
}
})
// component\template\transition\transitiongroup
</script>
动画实现组件之间的切换，使用transition标签将需要切换的标签放在里面，还可以在transition标签中实现动画的切换模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<style>
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(150px)
}
.v-enter-active,
.v-leave-active{
transition: all 0.5s ease
}
</style>
</head>
<body>
<div id="app">
<a href="" @click.prevent="comName=‘login‘">登录</a>
<a href="" @click.prevent="comName=‘register‘">注册</a>
<!-- 在这里指定需要展示组建的名称 -->
<transition mode="out-in">
<component :is="comName"></component>
</transition>
</div>
<script>
Vue.component(‘login‘,{
template:‘<h1>登录组件</h1>‘
})
Vue.component(‘register‘,{
template:‘<h1>注册组件</h1>‘
})
var vm= new Vue({
el: ‘#app‘,
data: {
comName:‘login‘
}
})
// component\template\transition\transitiongroup
</script>
</body>
</html>
以上是关于vue中的组件的主要内容，如果未能解决你的问题，请参考以下文章