【IMMVWeb训练营作业】自定义select组件

涉及到的Vue
1.组件间的通信
2.自定义事件
ps.和课堂上的实现方法有出入，但是大致是一样的，没有美化样式

<template>
  <div >
   <select-pannel v-bind:option="options1" btn="small"></select-pannel>
   <select-pannel v-bind:option="options2" btn="big"></select-pannel>
  </div>
</template>
<style>
li:hover{
  background-color: #00a2d4;
}
  ul{
    list-style: none;
  }
</style>
<script>
  import Vue from 'vue'
  //组件1 sublist
  var child = {
    props:['options'],
    template:`<ul >
      <li v-for=" item in options" @click="selectItem(item)">{{item}}</li>
        </ul>`,
    methods:{
      selectItem:function(item){
        this.$emit('select',item)
      },

    }
  }

  //主组件
  Vue.component('select-pannel',{
    props:['btn','option'],
    data:function(){
      return {
        value:'',
        show:0
      }
    },
    template:`<div >
    <label for="search" >{{btn}}</label>
       <input  list="list" id="search" v-model="value"  @click="showList"/>
       <div id="list" v-show="show"  >
         <sub-list v-on:select="selected"  :options="option"></sub-list>
       </div>

    </div>`,
    components:{
      'sub-list':child
    },
    methods:{
      selected:function(val){
        this.value = val;
        this.show = ~this.show
      },
      test:function(){
        console.log(this.option)
      },
      showList:function(){
        this.show = ~this.show
      }
    }
  })

  export default{
    'name':'selectList',
    data(){
      return {
        options1:['a','b','c'],
        options2:['1','2','3']
      }
    }
  }
</script>

//没有写美化的CSS样式

补充：单向数据流
1.父组件传来的属性不可以直接更改..踩了坑才看的视频。
解决方法就是：在组件中重新定义一个data，然后初始值赋值props…