vue2.x组件内嵌套组件，类似于select和option

这里简单讲解下类似于

这种组件的封装，其使用代码如下
Option可用v-for循环即可达到效果

	<Select v-model="search">
	  <Option :label="x" :value="xx" />
	</Select>

这里只讲讲值的同步，具体的样式这些自己想办法
**1.**引入select和option组合

<template>
  <div class="ul">
    <Select v-model="seacher" v-if="isShow">
      <Option :value="v" :label="l" />
    </Select>
    <input
      type="text"
      readonly
      v-model="seacher"
      @click="isShow = !isShow"
      placeholder="choose"/>
  </div>
</template>

<script>
import Select from "./select.vue";
import Option from "./option.vue";
export default {
  components: {
    Select,
    Option
  },
  provide () {
    return {
      setShow: this.show
    }
  },
  data() {
    return {
      v: "1",
      isShow: false,
      l: "3333333",
      seacher: ""
    };
  },
  methods: {
    show () {
      this.isShow = false
    }
  }
};
</script>

<style scoped></style>

**2.**select.vue

<template>
  <div class="sl">
    <slot />
    <div>
      {{setChooses}}
    </div>
  </div>
</template>

<script>
export default {
  provide() {
    return {
      setChoos: this.look
    };
  },
  props: {
    value: String
  },
  data() {
    return {
      setChooses: this.value
    };
  },
  // watch: {	这里的watch没起作用所以我直接下面的look中修改
  //   setChooses(newVal) {
  //     this.$emit("input", newVal);
  //   }
  // },
  methods: {
    look(e) {
      this.setChooses = e;
      this.$emit("input", e);
    }
  }
};
</script>

<style scoped></style>

3.option.vue

<template>
  <div class="op">
    <span @click="change" class="opt">{{ label }}</span>
  </div>
</template>

<script>
export default {
  inject: ["setChoos", "setShow"],
  props: {
    label: {
      type: String
    },
    value: String
  },
  methods: {
    change() {
      this.setChoos(this.value);
      this.setShow()
    }
  }
};
</script>

<style scoped>
.opt {
  cursor: pointer;
}
</style>