Vue组件化
自定义组件
1.创建.vue文件
<template>
<div class="nav-body">
<div class="navs">
<div>首页</div>
<div>新闻</div>
<div>动态</div>
<div>联系我们</div>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
.nav-body{
width: 100%;
height: 80px;
background: #eee;
}
.navs{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.navs div{
margin: 0px 10px;
}
</style>
2.在父组件中引入自定义组件
<script>
import Header from './views/Header'
export default {
}
</script>
3.在父组件中注册子组件
<script>
import Header from './views/Header'
export default {
components:{
'el-header': Header
}
}
</script>
4.在父组件中使用子组件
<template>
<div>
<el-header></el-header>
</div>
</template>
<script>
import Header from './views/Header'
export default {
components:{
'el-header': Header
}
}
</script>
组件通信
1.父组件向子组件传值
App.vue代表父组件，代码如下：
在父组件中使用自定义组件标签时，在标签上声明的属性就是要传递的参数名，标签上属性的值就是要传递的具体值，自定义标签的属性可以使用
v-bind修饰。
<template>
<div>
<el-header name="tom" :show="true"></el-header>
</div>
</template>
<script>
import Header from './views/Header'
export default {
components:{
'el-header': Header
}
}
</script>
在子组件中使用 props 选项接收外界的传值，代码如下：
<template>
<div>
<div v-show="show">
Header.vue，获取父组件传值：{
{
name}}，
</div>
</div>
</template>
<script>
export default {
props:{
name: String,
show: Boolean
}
}
</script>
2.子组件向父组件传值
在App.vue中使用子组件标签时，自定义一个事件
<template>
<div>
<!-- @hello就是自定义的事件名称 -->
<el-header name="tom" :show="true" @hello="handleClick"></el-header>
</div>
</template>
在子组件中，触发自定义的事件
<template>
<div>
//触发自定义的事件，想用什么事件触发，就写什么事件，比如点击事件，移入移出事件等。
<div v-show="show" @click="clickDiv">
Header.vue，获取父组件传值：{
{
name}}，
</div>
</div>
</template>
<script>
export default {
props:{
name: String,
show: Boolean
},
methods: {
clickDiv(){
//点击事件函数，假如我们要在此处触发自定义的 hello 事件
//在子组件中声明一个变量
let i = 11
//使用vue实例上的 $emit() 函数触发，该函数的参数1为要触发的事件名称，参数2为事件名称上绑定的函数传参
this.$emit('hello',i)
}
}
}
</script>
当点击父组件中间的子组件标签时，即触发了绑定的事件函数
<template>
<div>
<el-header name="tom" :show="true" @hello="handleClick"></el-header>
</div>
</template>
<script>
import Header from './views/Header'
export default {
components:{
'el-header': Header
},
methods: {
handleClick(i){
//在执行父组件中的事件函数时获取参数
console.log('点击。。。。',i)
}
}
}
</script>
封装自定义组件
1.封装输入框组件
<template>
<div>
<input type="text" @keypress.enter="enter" v-model="value" >
<span v-show="clearBtn">
<span class="clear" v-show="isClear" @click="value = ''">×</span>
</span>
</div>
</template>
<script>
export default {
props: {
clearBtn: Boolean
},
data(){
return {
value: '',
isClear: false
}
},
watch: {
value(val){
if(val.length > 0){
this.isClear = true
}else{
this.isClear = false
}
}
},
methods: {
enter(){
this.$emit('enter',this.value)
}
}
}
</script>
<style>
.clear{
margin-left: -20px;
cursor: pointer;
}
</style>
2.封装按钮组件
<template>
<div>
<button :style="{color: fontColor, backgroundColor: bgColor}" @click="clickBtn">{
{
text}}</button>
</div>
</template>
<script>
export default {
props:{
text: String,
fontColor: String,
bgColor: String
},
methods:{
clickBtn(){
this.$emit('click')
}
}
}
</script>
3.使用自定义的样式组件
<template>
<div>
<el-input @enter="handleSubmit" :clearBtn="false"></el-input>
<el-button @click="handleClick" text="提交" fontColor="blue" bgColor="red"></el-button>
</div>
</template>
<script>
import Input from './views/Input'
import Button from './views/Button'
export default {
components:{
'el-input': Input,
'el-button': Button
},
methods: {
handleClick(){
console.log('abc...')
},
handleSubmit(val){
// 设计一个默认参数val，在按下回车时自动获取到输入框的值
console.log('提交...',val)
}
}
}
</script>