vue 封裝自定義組件

 先說說組件的結構

最好單獨放一個文件夾，有依賴的話裝依賴

Sjld.vue 內容

<template id="sjld">
    <label >
        <select v-model="selected" prop="selected"  >
          <option v-for="option in sheng" :value="option.id" :label="option.name" :key="option.id"> {{option.name}} </option>
        </select>

        <select v-model="selecteds"  prop="selecteds">
          <option  v-for="v in shi" :value="v.id" :label="v.name" :key="v.id"> {{v.name}} </option>
        </select>

        <select v-model="selectedss" prop="selectedss">
          <option v-for="n in xian" :value="n.id" :label="n.name" :key="n.id"> {{n.name}} </option>
        </select>
        <button type="info" @click="tijiao">提交</button>
    </label>
</template>
<script>
    export default {
        data:function(){
            return {
                shi:[],
                xian:[],
                selected:'',
                selecteds:'',
                selectedss:'',
            }
        },
        props:{ citys:Array, sheng:Array, },
        watch:{
            selected:function(val, old){
                const self=this;
                if(val != old){
                    self.shi=[];
                    let upid = self.selected;
                    let len = self.citys.length;
                    for (var i = 0; i < len; i++) {
                        if(self.citys[i].upid == upid){
                            self.shi.push(self.citys[i])
                        }
                    };
                }
            },
            selecteds:function(val, old){
                const self=this;
                if(val != old){
                    self.xian=[];
                    let upid = self.selecteds;
                    let len = self.citys.length;
                    for (var i = 0; i < len; i++) {
                        if(self.citys[i].upid == upid){
                            self.xian.push(self.citys[i])
                        }
                    };
                }
            },
        },
        methods:{
            getcitys(){
                const self=this;
                self.citys=JSON.parse(localStorage.getItem('citys'))
                self.sheng=JSON.parse(localStorage.getItem('sheng'))
            },
            tijiao(){
                const self=this;
                let data={
                    sheng:self.selected,
                    shi:self.selecteds,
                    xian:self.selectedss,
                }
                self.$emit('change', data);
                //console.log(data)
            },
        },
        mounted(){
            //this.getcitys();
        },
        computed: {
        }
    }
</script>

解釋一下：props 父級傳給組件的數據   然后用  $emit('方法名'，數據) 返回父級數據

 

index.js 內容

白色的是引入組件，紅色的是全局安裝，帶下划線的是組件的名字，黃色的是導出組件，缺一不可

 

現在組件已經封裝好了，怎么用？跟其他組件一樣使用

打開 main.js  加上

import sjld from './components/sjld/index.js'

Vue.use(sjld);

然后在項目中任意處

<sjld :citys="citys" :sheng="sheng" @change="change"></sjld>

citys ,cheng 對應組件中 props 

chang 對應組件中$emit的方法