组件化及其UI组件库

组件化及其UI组件库

1、组件化

1.1、自定义组件

第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.2、组件通信

1.2.1、父组件向子组件传值

App.vue代表父组件，代码如下：

<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>

在父组件中使用自定义组件标签时，在标签上声明的属性就是要传递的参数名，标签上属性的值就是要传递的具体值，自定义标签的属性可以使用 v-bind 修饰。

在子组件中使用 props 选项接收外界的传值，代码如下：

<template>
  <div>
      <div v-show="show">
        Header.vue，获取父组件传值：{{name}}，
      </div>
  </div>
</template>

<script>
export default {
    props:{
        name: String,
        show: Boolean
    }
}
</script>

1.2.2、子组件向父组件传值

第1步：在App.vue中使用子组件标签时，自定义一个事件

<template>
  <div>
  	<!-- @hello就是自定义的事件名称 -->
     <el-header name="tom" :show="true" @hello="handleClick"></el-header>
  </div>
</template>

第2步：在子组件中，触发自定义的事件

<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>

第3步：当点击父组件中间的子组件标签时，即触发了绑定的事件函数

<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.3、封装自定义组件

封装输入框组件

<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>

封装按钮组件

<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>

使用自定义的样式组件

<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>

2、Vue UI组件库

2.1、Vant UI

安装

cnpm i vant --save

全局引入

// 在main.js文件中引入下面代码

import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

详细操作查看官方API：https://vant-contrib.gitee.io/vant/#/zh-CN/home