用Vue仿element-ui从0到1封装可复用的组件-radio/radioGroup

1.需要的前置知识

vue基础语法,组件通讯(props,$emit,provide.inject)，slot，v-model，computed

1.1准备工作，子组件引入全局环境中

import vbRadio from "@/components/Radio";
import vbRadiogroup from "@/components/RadioGroup";
Vue.component(vbRadio.name, vbRadio);
Vue.component(vbRadiogroup.name, vbRadiogroup);

爷爷组件：App.vue
父组件：RadioGroup.vue
父组件：Radio.vue

2.实现目标

功能说明：点击相应的按钮，App.vue能得到相应的label的信息，参数支持说明。

2.1先实现Radio.vue

App.vue

<vb-radio label="1">man</vb-radio>
<vb-radio label="2">women</vb-radio>

Radio.vue

Radio.vue里的计算属性和方法;

这里的v-model原理还是之前讲过的，只要子组件向父组件发送一个input事件，带上参数，就能被父组件接收

2.2实现RadioGroup.vue

App.vue

<radio-group v-model='radio'>
      <vb-radio label="1">man</vb-radio>
      <vb-radio label="2">women</vb-radio>
      <vb-radio label="3">ladyboy</vb-radio>
    </radio-group>

RadioGroup.vue

<template>
  <div class=''>
    <slot></slot>
  </div>
</template>
<script>
export default {
  components: {},
  name: "vbRadiogroup",
  //为了能Radio.vue可以与RadioGroup.vue通信，
  //在RadioGroup.vue加上provide，子组件就可以用injec接受，获取App.vue传给RadioGroup.vue全部的属性和RadioGroup.vue自身方法。
  provide() {
    return { radioGroup: this };
  },
  props: {
    value: "",
  },
  data() {
    return {};
  },
  methods: {},
  mounted() {},
};
</script>
<style lang='scss' scoped>
</style>

inject: {
    radioGroup: { default: "" },
  },

3.完整的源码：

https://gitee.com/httpxiaobocom/vue-component-ui.git