Vue components should be divided into Block and Element.
What problem does this feature solve?
It is very difficult to find and debug block components when using framework like bootstrap-vue. To solve this problem Vue components can follow standard BEM (Block, Element and Modifier) approach. While Modifiers are already denoted by props, Block and Element needs clear mention or declaration in Vue template section.
It will provide following benefits:
- Ease of finding and debugging block components inside DevTools.
- Clarification on separation of webpage into components.
- Use of BEM approach.
- Future use of Element component on based of type.
What does the proposed API look like?
The Vue component template should always accompanied by attribute "block" or "element". If a Vue component has template section without any declaration, Then it would be considered as block type by default.
Block type component
<template>...</template>
<template block>...</template>
<template block="navbar">...</template>
Element type component
<template element>...</template>
<template element="button">...</template>
The following functionality is already available but not clearly defined, With element approach it can be clearly defined and scoped.
- If the component is of element="input" type, then v-model should automatically work on component, Without defining emit "input".
- If the component is of element="button" type, then @click should automatically work on component, Without defining emit "click".
Please use the RFC process for proposals of complex changes such as this: https://github.com/vuejs/rfcs
FWIW: I'm not in convinced.