vue scoped slot bug repro 3.0.0-rc.6

by Alan Song

JavaScript

import { defineComponent, h, createApp, ref } from "https://unpkg.com/[email protected]/dist/vue.esm-browser.js";

const Foo = defineComponent({
	template: `
  	<div @click="toggle" style="cursor: pointer">
      Foo internal active: {{ active }}
    	<slot v-bind="{ active }"/>
    </div>
  `,
  setup() {
  	const active = ref(false);
    return { active, toggle: () => active.value = !active.value }
  }
})

const Bar = defineComponent({
	components: { Foo },
	template: `
		<Foo v-slot="{ active }">
     	<div>Bar active from Foo's scoped slot (before Bar's own slot): {{ active }}</div>
      <slot/>
     	<div>Bar active from Foo's scoped slot (after Bar's own slot): {{ active }}</div>
    </Foo>
  `
})

const app = createApp({
	components: { Foo, Bar },
	template: `
  <div>
  	<h1>Click below to reproduce the issue:</h1>
    <Bar>
     Bar slot content
		</Bar>
  </div>
  `
});

app.mount(document.body);