vue 封装自定义UI组件

组件封装

在做项目时，有个可能在多个页面用到同一个UI组件，只是功能或者样式有些许不同，所以就把这些模块可以提取出
来封装成一个组件多次使用，向其传递参数让它实现不同功能就提高了开发效率，程序员毕竟都懒

1.在src的components文件夹内创建common文件夹，组件都放在里面

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210204145108290.png)

2.在组件内部

<template>
  <div>
    <button @click="say"></button>
  </div>
</template>
<script>
export default {
  name: 'Btn',
  props: {
  // 这里可以有两种接受父组件传递的参数
  // x不带默认值(必传)，如果时null就表示任意类型都可
  // props中的参数在子组件中直接用this.调用，如this.x,this.y
    x: String,
    y: {
      type: String,
      default: 'hello'  //可以给传递的参数设置默认值
    },
    z: {
    	type: String,
    	require: true	//把这个属性设置为true 则表示这个参数必传，与defaul有冲突是不嘞？
    }
  },
  methods: {
    say () {
    // 通过this.$listeners监听父组件是否传递这个歌事件，传递了才会触发
    //  这里时button上的click触发，也可以其他，如input  的 input事件
      if(this.$listeners['speak']){
        this.$emit('speak')
      }
    }
  }
}
</script>
<style scoped>
//这里写样式按照自己需要，别忘了style中的scoped要加上
</style>

3.在main.js中引入注册
这里就不写局部注册使用的方式了，比较简单

import Btn from "./components/common/wrap.vue"	// 这里引入自己写的组件
// 这里的'Btn'就是以后你要使用的标签名，建议以大写开头，后面的Btn则是引入的组件
Vue.component('Btn', Btn);	

4.自定义组件的使用

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <router-link :to="{path: '/about', query: {id: '333'}}">dianwo</router-link>
    <Btn @speak="sayHello" :z="'1'"></Btn> //这里就是使用上面注册的组件
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";
export default {
  name: "Home",
  components: {
    HelloWorld
  },
  methods: {
  // 这是绑定的事件，在组件内button触发click时则会触发这个
    sayHello () {
      console.log("Hello")
    }
  }
};
</script>