一、前言
组件是Vue最核心的内容，也是框架最精彩的部分。为什么要使用组件？组件可以简单地理解为模块化单元，Vue.js的组件就是用来提高重用性的，让代码可以服用。学习完组件之后，会发现一个新的世界等你探索。本文就一起来研究一下，组件的具体使用。
二、Vue组件
1.使用props正向传值
组件不仅仅是模板间的复用，更重要的是组件之间的通信。通常父组件包含了子组件，父组件要把数据传递给子组件，这时候就需要使用props了。我们可以通过一个小案例来加深对它的使用
//父组件login
<template>
<div>
<child :msg1="msg1" msg2="msg2">
</child>
</div>
</template>
<script>
import child from '@/pages/login-child'
export default {
data(){
return {
msg1 : 'msg1'
}
},
components:{
child,
}
}
</script>
<style>
</style>
//子组件login-child
<template>
<div>
<h1>来自父组件的消息1：{{msg1}}</h1>
<h1>来自父组件的消息2：{{msg2}}</h1>
</div>
</template>
<script>
export default {
props:[
"msg1","msg2"
],
}
</script>
<style>
</style>
运行结果，
image.png
- 在子组件中用
props定义了一个要从父组件传递的数据的属性数组(msg1,msg2)，规定了这些属性是要从父组件拿的。 - 在父组件中通过给
msg1和msg2赋值把值传给子组件。这样就完成了父子组件通信。
2.自定义事件和$emit方法
vue允许正向传值，也就是父组件传给子组件，正向传值是不需要条件触发的是主动的，逆向传值则是不允许的，需要主动触发。这里就用到了$emit.
用法：this.$emit('event',val)
-
event： 代表自定义事件名称， -
val：代表自定义事件传递的值，这里的val是可选参数
下面通过一个例子来具体看看逆向传值的流程
// login.vue
<template>
<div>
<child @change="getVal" ></child>
</div>
</template>
<script>
import child from '@/pages/login-child'
export default {
methods:{
getVal(val){
console.log(val);
}
},
components:{
child,
}
}
</script>
<style>
/* */
</style>
//login-child
<template>
<div>
<button @click="change">change</button>
</div>
</template>
<script>
export default {
methods:{
change(){
this.$emit('change','childMsg');
}
}
}
</script>
<style>
</style>
运行之后发现，控制台打印childMsg说明，父组件拿到了子组件的值。
- 子组件通过
change方法触发$emit事件，把childMsg传递出去,
this.$emit('change','childMsg');
}
- 父组件通过自定义指令的
change来触发getVal拿到子组件的值
<child @change="getVal" ></child>
//
getVal(val){
console.log(val);
}
以上就是最简单的逆行传值流程
3.slot
slot的官方定义死用于组件的内容分发，简单来说就是在组件化开发中，虽然组件是一样，但是在不同的场景下，组件的某一部分呢是不同的。主要有匿名slot和具名slot
- 匿名
slot
匿名slot就是没有名字的插槽，可以放任意的内容,示例如下
// login.vue
<template>
<div>
<child>填入内容</child>
</div>
</template>
<script>
import child from '@/pages/login-child'
export default {
methods:{
},
components:{
child,
}
}
</script>
<style>
/* */
</style>
// login-child
<template>
<div>
<p>头部</p>
<slot>如果没有内容就显示</slot>
<p>尾部区域</p>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
运行结果
image.png
我们发现父组件的文字直接嵌入到插槽里面了，如果父组件没有内容就会默认显示
slot的内容，如图，
image.png
以上就是匿名
slot的简单使用
- 具名
slot
就是多个slot都有不同的名字，插入的内容是根据名字来的。
示例如下，
//login
<template>
<div>
<child>
<div slot="content1">父组件content1</div>
<div slot="content2">父组件content2</div>
<div slot="content3">父组件content3</div>
<div slot="content4">父组件content4</div>
</child>
</div>
</template>
<script>
import child from '@/pages/login-child'
export default {
methods:{
},
components:{
child,
}
}
</script>
<style>
/* */
</style>
// login-child
<template>
<div>
<p>头部</p>
<slot name="content1">如果没有内容就显示content1</slot>
<br>
<slot name="content2">如果没有内容就显示content2</slot>
<br>
<slot name="content3">如果没有内容就显示content3</slot>
<br>
<slot name="content4">如果没有内容就显示content4</slot>
<p>尾部区域</p>
</div>
</template>
<script>
export default {
}
</script>
<style>
.third{
color: red;
}
</style>
运行结果,
image.png
可以看到每一段内容都有对应的卡槽，这样就不会显得杂乱无章了。
三、总结
以上就是关于一些组件的简单内容，vue最强大的就是组件功能，这还需要我们不断探索和研究，共勉！
