組件開發總結

插槽

作用域插槽

Menu子組件

<ul :class="wrapClasses">
    <li :class="itemClasses(item)" v-for="item in menuData.options" 							@click="getActiveItem(item)" :key="item.value">
        <!-- :option="item" 的目的是爲了讓外面可以使用到item -->
        <slot :option="item"></slot>  
        <span :class="[prefixCls + '-right-icon']" v-if="item.children">
            <i-icon type="angle-right"></i-icon>
        </span>
	</li>
</ul>

Cascader組件

<menu :key="item.options.value" v-on:change-menus="changeMenusAry" :menuData="item" 	v-for="item in menusAry">
    <!-- slot-scope使用的就是Menu組件導出的option -->
    <template slot-scope="{option}"> 
        <!-- :option="option"將slot-scope中的option導出到使用Cascade組件的地方 -->
        <slot :option="option"> 
            {{option.label}}
        </slot>
	</template>
</menu>

父子組件通信

父子組件通信：父組件給子組件傳遞參數是通過:menuData=“item” 這樣的形式

子組件給父組件傳參數是在觸發父組件的自定義事件中進行傳參

父組件：

<i-menu :key="item.options.value" v-on:change-menus="changeMenusAry" :menuData="item" 	v-for="item in menusAry">
    <template slot-scope="{option}"> 
        <slot :option="option"> 
            {{option.label}}
        </slot>
	</template>
</i-menu>

....
changeMenusAry(children) {
    let jump = false;
    if (children && children.options) {
        children.index && this.menusAry.forEach((item, index) => {
            if (item.index == children.index) {
                this.$set(this.menusAry, index, children);
                jump = true;
            }
        });

        !jump && this.menusAry.push(children);
    } else {
        this.clearMenus();
    }
}
...

子組件：

    <ul :class="wrapClasses">
        <li :class="itemClasses(item)" v-for="item in menuData.options" @click="getActiveItem(item)" :key="item.value">
            <slot :option="item"></slot>
            <span :class="[prefixCls + '-right-icon']" v-if="item.children">
               <i-icon type="angle-right"></i-icon>
            </span>
        </li>
    </ul>


.....
getActiveItem(item) {
    this.activeItem = item.value;

    if (item.children) {
        this.$emit('change-menus', {options: item.children, index: this.menuData.index 			+ 1});
        return;
    }

    this.$emit('change-menus');
}
.....

這是自己在18年寫組件時候的總結，希望對你有用 ^_^