一个自定义不用标签的组件 1、Select.vue 2、Select.js export default { name: 'HdSelect', data(){ return{ currentList:[], selectShow:false, curselect:'' } }, props:{ list:{ type:Array, default:[] } }, watch:{ data: function () { this.makeList(); } }, methods:{ makeList(){ this.currentList = this.list this.curselect = this.list[0] }, change(){ this.selectShow = !this.selectShow }, changeselect(index){ this.curselect = index; this.selectShow = false; }, }, mounted:function(){ this.makeList(); } } index.js import mySelect from './Select.vue'; const HdSelect = { install:function(Vue){ Vue.component('HdSelect',mySelect) } } export default HdSelect; 你可能感兴趣的:(一个自定义不用标签的组件)

1、Select.vue

2、Select.js

export default {
  name: 'HdSelect',
  data(){
    return{
      currentList:[],
      selectShow:false,
      curselect:''
    }
  },

  props:{
    list:{
      type:Array,
      default:[]
    }
  },

  watch:{
    data: function () {
      this.makeList();
    }
  },

  methods:{
    makeList(){
      this.currentList = this.list
      this.curselect = this.list[0]
    },
    change(){
      this.selectShow = !this.selectShow
    },
    changeselect(index){
      this.curselect = index;
      this.selectShow = false;
    },
  },

  mounted:function(){
    this.makeList();
  }
}

index.js

import mySelect from './Select.vue';
const HdSelect = {
  install:function(Vue){
    Vue.component('HdSelect',mySelect)
  }
}

export default HdSelect;