<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">I have bind some style properties, like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="position = {left: 40, top: 50}"><pre class="notranslate"><code class="notranslate">position = {left: 40, top: 50}
</code></pre></div>
<p dir="auto">so my first thought is this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div class={`basic-tooltip ${className}`} style={position}&gt;"><pre class="notranslate"><code class="notranslate">&lt;div class={`basic-tooltip ${className}`} style={position}&gt;
</code></pre></div>
<p dir="auto">the result is style is not show at all。<br>
I have to change to this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="// this really sucks~
const positionStyle = {}
if (style.left) {
  positionStyle.left = `${style.left || 0}px`
}
if (style.right) {
  positionStyle.left = `${style.right || 0}px`
}
if (style.top) {
  positionStyle.left = `${style.top || 0}px`
}
if (style.bottom) {
  positionStyle.bottom = `${style.bottom || 0}px`
}

&lt;div class={`basic-tooltip ${className}`} style={positionStyle}&gt;"><pre class="notranslate"><code class="notranslate">// this really sucks~
const positionStyle = {}
if (style.left) {
  positionStyle.left = `${style.left || 0}px`
}
if (style.right) {
  positionStyle.left = `${style.right || 0}px`
}
if (style.top) {
  positionStyle.left = `${style.top || 0}px`
}
if (style.bottom) {
  positionStyle.bottom = `${style.bottom || 0}px`
}

&lt;div class={`basic-tooltip ${className}`} style={positionStyle}&gt;
</code></pre></div>
<p dir="auto">so why don't the first way be supported, this is much more elegant than the second way。</p>
<h3 dir="auto">What does the proposed API look like?</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="render(){
  const position = {left: 40, top: 50}
  return &lt;div class={`basic-tooltip ${className}`} style={position} /&gt; 
}"><pre class="notranslate"><code class="notranslate">render(){
  const position = {left: 40, top: 50}
  return &lt;div class={`basic-tooltip ${className}`} style={position} /&gt; 
}
</code></pre></div>
<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">When managing components it is important to have all the information you can interact with at a glance.<br>
In general, a component has two primary interactions props it takes and events it emits.</p>
<p dir="auto">We have the ability to know at a glance for Props as you can go to the props section of the component and you know with 100% certainty which props are available, the types of the props if they are required, and so on.<br>
We do not have this same ease when it comes to what events a component can emit.<br>
We have $emit for a component but this can be anywhere in the component and it is not a streamlined process. With this being the nature of $emits we lose the ability to know at a glance.</p>
<p dir="auto">It would be nice to extend the component structure to include an emits section that if included Vue throws an error if an $emit event happens that has not been listed. This can also we extended to include types.</p>
<h3 dir="auto">What does the proposed API look like?</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Vue.component('addOne',{
  template: `&lt;button v-on:click=&quot;add()&quot;&gt;Add One&lt;/button&gt;`,
  props: {
    num: {
      type: Number,
      required: true
    }
  },
  emits: {
    result: {
      type: Number
    }
  },
  methods: {
    add () {
      this.$emit('result', this.num + 1)
    }
  }
})"><pre class="notranslate"><code class="notranslate">Vue.component('addOne',{
  template: `&lt;button v-on:click="add()"&gt;Add One&lt;/button&gt;`,
  props: {
    num: {
      type: Number,
      required: true
    }
  },
  emits: {
    result: {
      type: Number
    }
  },
  methods: {
    add () {
      this.$emit('result', this.num + 1)
    }
  }
})
</code></pre></div>