JSFiddle - React, Tailwind, and code Playground

by imall

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
  <div id="app">
    <!-- slotProps 名稱可自訂 -->
    <my-component v-slot="slotProps">
      {{slotProps.text}}
    </my-component>
  </div>

JavaScript

const app = Vue.createApp();
    
    app.component("my-component", {
      template: `
    <div class="container">
        <slot :text="msg"></slot>
    </div>
`,
      setup() {
        const msg = Vue.ref("Hello World");
        return {
          msg
        }
      }
    });
    app.mount("#app");