Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>https://github.com/vuejs/vue/issues/12232</title>
   <script src="https://unpkg.com/vue@2.6.14"></script>
<!--  <script src="http://localhost:5000/vue.js"></script>-->
</head>
<body>
​
<div id="app">
  <foo></foo>
</div>
​
<script>
  Vue.component('foo', {
    template: `
    <PublishToSocialStep>
      <form>
        <input v-model="text" type="text"/>
        <p>{{ text }}</p>
      </form>
    </PublishToSocialStep>
  `,
    data() {
      return {
        text: 'initial',
      }
    },
  });
​
  Vue.component('PublishToSocialStep', {
    template: `
  <AuthUserProvider v-slot="{ user }">
        <StepContainer>
            <template #content>
                <div>
                    <h1>You're logged in as {{ user.first }} {{ user.last }}!</h1>
                    <slot/>
                </div>
            </template>
        </StepContainer>
  </AuthUserProvider>
  `
  });
​
  Vue.component('AuthUserProvider', {
    template: `
  <div>
    <slot v-bind="{ user: { first: 'scoped', last: 'slot' } }"/>
  </div>
  `
  });
​
  Vue.component('StepContainer', {
    template: `
  <div style="border: 1px gray dashed; padding: 20px;">
    <slot name="content"/>
  </div>
  `
  });
​
  new Vue({
    el: "#app",
    data: {}
  })
</script>
</body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
JuniorTourpro
0viewers