Vue学习第四天（组件的相关操作）
作者：互联网
Vue学习第四天（组件的相关功能）
，今天写了两个博文，第一篇补上了昨天的知识点，这一篇简单总结下，今天的学习内容，今天主要学习了vue中的组件的概念，说起组件化的创作理念，就要在提一提我们之前的分层概念，也就是模块化思想，这种思想在后端代码中很常见
- 模块化，将每一层的代码功能细化
- 组件化，按照前台的网页结构进行的网页拆分
下面简单写一下，vue中组件究竟是如何使用的吧
第一种方法，我们先进行继承模板的制作，在此基础上进行容器的制作
var com1 = Vue.extend({
//模板即我们要渲染的html结构
template: '<h3>我的一个道姑朋友</h3>'
})
//如果此处使用了驼峰命名，我们在页面使用时应该去掉驼峰加上-
Vue.component('mycpm1', com1)
不难看出，在继承模板中，我们定义了一个属性template，这个属性，我们在后面会经常提到，这是当前组件的html结构，在得到这个继承模板以后，我们在使用vue的内置方法制作组件，组件名为mycpm1，继承自模板com1,在使用时，我们只需要将标签放入到网页中即可
<div id="app1">
<mycpm1></mycpm1>
</div>
挺简单的吧
下面介绍第二种方式创建实例，我们将使用更简洁的方式，那就是，将两步合成一步
Vue.component('mycpm3', {
template:'#emp1'
})
不难看到，此时的template属性后面跟上了一个选择器，我们在网页上新建一个template标签，让他的id等于emp1,然后就能调用了
<template id="emp1">
<div>
<input type="text" name="" id="" value="" />
<button type="button">戳我</button>
</div>
</template>
这里顺便提一下，我们的组件理论上只能有一个根，即根元素是单一的，否则，vue会报错，上面这种定义方法，和第一种的调用方法，完全一致
另外，对于组件而言，她也有自己的数据，但是这里的data，不再是一个属性，而是一个方法，为的是，多个实例使用同一个模板时，它们之间的数据不会混乱，就像这样
var vue = new Vue({
el:'#app1',
data:{
},
methods:{
},
components:{
//可以自定义一个私有化的组件，仅供当前vue实例使用
login:{
template:'<h3>误杀</h3>'
},
//也可以在组件中定义一个data方法，用于处理个性化的数据
mytext:{
template:'<h3>南朝四百八十寺，多少楼台烟雨中-->{{msg}}</h3>',
data:function(){
return {
msg:"金光闪闪的五个字"
}
}
}
}
})
而且，我们还可以在组件中带哦用，我们的数据，可以直接使用插值表达式的方式进行操作
对于昨天的动画效果，我们也可以搬到组件中来使用，同样，我们首先要把使用动画的html结构使用标签包裹住，就像下面这样
<div id="app4">
<button v-on:click="denglu">登陆</button>
<button v-on:click="zhuce">注册</button>
<!--可以使用v-bind:is指定不同的组件id，用一个元素，切换两个不同组件-->
<!--通过mode属性控制组件切换，先出后进，不会冲突-->
<transition mode="out-in">
<component v-bind:is="com1"></component>
</transition>
</div>
这个组件这里，还是用了一个新的知识点，那就是v-bind:is，这里是我们为当前组件绑定了一个组件，细心的读者可能已经发现，我们使用的标签是通配标签，也就是说，这个地方可以是任何我们定义过的组件，此时，这个地方是什么标签取决于com1的值。我们不妨在vue实例中定义一个数据com1,在定义一个函数，用来切换com1的值，就能使用一个标签完成两个标签的切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录页</title>
<script src="js/vue.js" type="text/javascript"></script>
<style>
.v-enter{
opacity: 0;
transform: translateZ(150px);
}
.v-leave-to{
opacity: 0;
transform: translateX(150px);
}
.v-enter-active,
.v-leave-active{
transition: all 0.6s ease;
}
</style>
</head>
<body>
<div id="app3">
<button v-on:click="denglu">登陆</button>
<button v-on:click="zhuce">注册</button>
<login v-if="flag"></login>
<register v-else="flag"></register>
</div>
<div>-----------------------------------------------</div>
<div id="app4">
<button v-on:click="denglu">登陆</button>
<button v-on:click="zhuce">注册</button>
<!--可以使用v-bind:is指定不同的组件id，用一个元素，切换两个不同组件-->
<!--通过mode属性控制组件切换，先出后进，不会冲突-->
<transition mode="out-in">
<component v-bind:is="com1"></component>
</transition>
</div>
<template id="emp1">
<h2>我的是登录页</h2>
</template>
<template id="emp2">
<h2>先生需要注册哦</h2>
</template>
<script>
var vue = new Vue({
el:'#app3',
data:{
flag:true
},
methods:{
denglu:function(){
this.flag = true
},
zhuce:function(){
this.flag = false
}
},
components:{
login:{
template:'#emp1'
},
register:{
template:'#emp2'
}
}
})
var vue1 = new Vue({
el:'#app4',
data:{
com1:"login"
},
methods:{
denglu:function(){
this.com1 = "login"
},
zhuce:function(){
this.com1 = "register"
}
},
components:{
login:{
template:'#emp1'
},
register:{
template:'#emp2'
}
}
})
</script>
</body>
</html>
最后，我们讲一些父子标签的问题，在子标签中，我们可以使用父组件中的数据和函数，不过要通过一些特殊的方式，当我们要使用数据时，我们需要三步
- 在引用时使用v-bind:xxx=“data”,将数据传送过来
- 在组件中使用props接受一下绑定的属性
- 在组件模板中使用即可，但是传递过来的数据都是只读的
在html中
<div id="app1">
<!--在组件上绑定函数，用来传递实例的方法给组件-->
<login v-bind:pmsg="msg" v-on:fun="show"></login>
</div>
<template id="emp1">
<div>
<h3>{{pmsg}}, 牧童遥指杏花村<h3>
<button v-on:click="push">push</button>
</div>
</template>
在VUE实例中
var vue = new Vue({
el:'#app1',
data:{
msg:"借问酒家何处有"
},
methods:{
show:function(){
console.log("我是父容器的一个方法，我会输出666");
}
},
components:{
//理论上，私有组件无法访问到所在实例的内容
//但是我们可以通过属性绑定的方式，将数据传递过来
//1. 在引用时使用v-bind:xxx="data",将数据传送过来
//2. 在组件中使用props接受一下绑定的属性
//3. 在组件模板中使用即可，但是传递过来的数据都是只读的
login:{
template:'#emp1',
props:['pmsg'],
methods:{
push:function(){
//在组件自身的方法中，我们可以调用传入的方法
//不过必须使用this.$emit触发
this.$emit('fun')
}
}
}
}
})
使用父组件的方法，则需要先进行事件绑定，在使用组件内置的方法this.$emit(‘方法名’)即可调用
希望生活早日恢复正轨，为之则易，不为则难
zzuli_xiaomingke
发布了53 篇原创文章 · 获赞 3 · 访问量 1万+
私信
关注
标签：vue,com1,第四天,Vue,template,使用,组件 来源： https://blog.csdn.net/zzuli_xiaomingke/article/details/104201416