<h3 dir="auto">Version</h3>
<p dir="auto">2.5.13</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://jsfiddle.net/50wL7mdz/94716/" rel="nofollow">https://jsfiddle.net/50wL7mdz/94716/</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<ol dir="auto">
<li>navigate to page-a to make keep-alive to cache page-a component</li>
<li>navigate to page-b to make keep-alive to cache page-b component</li>
<li>now,  if remove cache of page-a,  page-a was destroyed correctly,<br>
if navigate back to page-a and remove cache of page-b ,page-b was not destroyed</li>
</ol>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">page-b was destroyed</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">page-b was was not destroyed</p>
<hr>
<p dir="auto"><a href="https://github.com/vuejs/vue/blob/dev/src/core/components/keep-alive.js#L44">https://github.com/vuejs/vue/blob/dev/src/core/components/keep-alive.js#L44</a></p>
<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">There are many cases where attributes passed to a Vue component should not be added to the root element, but rather a sub-element. For example, in <a href="https://github.com/almino/semantic-ui-vue2/blob/master/src/elements/Input.vue">this UI component</a>, an incredible amount of props must be used to ensure that attributes are added to the <code class="notranslate">input</code> element, instead of the wrapper <code class="notranslate">div</code>.</p>
<p dir="auto">Additionally, it's often desirable to expose all event listeners on a form element to the parent, which also requires a lot of boilerplate currently if the element is not the root (in which case, the <code class="notranslate">.native</code> modifier can solve the problem).</p>
<h3 dir="auto">What does the proposed API look like?</h3>
<p dir="auto"><strong>EDIT: <a href="https://github.com/vuejs/vue/issues/5983#issuecomment-312085126" data-hovercard-type="issue" data-hovercard-url="/vuejs/vue/issues/5983/hovercard">Start here</a> to catch up on the discussion.</strong></p>
<p dir="auto">Currently by default, the "exposed" element (the one that arbitrary attributes can be added to) is always the root element. A new directive could be used to define a different exposed element. Some ideas for the name of the directive:</p>
<ul dir="auto">
<li><code class="notranslate">v-expose</code> (probably my personal favorite)</li>
<li><code class="notranslate">v-expose-attrs</code> (probably clearer, but lengthier)</li>
<li><code class="notranslate">v-main</code></li>
<li><code class="notranslate">v-primary</code></li>
</ul>
<p dir="auto">If <code class="notranslate">v-expose</code> is added to an element, it will accept attributes passed to its component - and these attributes will <strong>no longer</strong> be passed to the root element.</p>
<p dir="auto">Other features that may be nice:</p>
<ul dir="auto">
<li>If the directive is defined on multiple elements, attributes will be duplicated across each of them</li>
<li>In the case where a subset of attributes should be accepted by an element, <code class="notranslate">v-expose</code> could accept a string or array of strings (e.g. <code class="notranslate">v-expose="class"</code> or <code class="notranslate">v-expose="['class', 'type', 'placeholder']"</code>). In this case, these attributes would be added to the element (again, instead of to the root element), but all other attributes would be added to the root element or to the element(s) with a valueless <code class="notranslate">v-expose</code>.</li>
</ul>