JSFiddle - React, Tailwind, and code Playground

by kurotanshi

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <h1>{{ msg }}</h1>

  <!-- 元件內不插入任何內容 -->
  <custom-component></custom-component>
</div>

SCSS

#app {
  display: block;
  padding: 1rem;
  padding-top: 2rem;
  font-size: 1rem;
  
  h1, div {
    border: 1px solid #000;
  }
  
  h1 {
    background-color: #eee;
    font-size: 1.5rem;
    padding: 10px;
    margin-bottom: 1rem;
  }

  div {
    background-color: #ccc;
    font-size: 1rem;
    padding: 5px;
    margin: 5px 0;
  }
}

JavaScript

const app = Vue.createApp({
  data() {
    return {
      msg: 'Parent!'
    }
  }
});

app.component('custom-component', {
  template: `<div> 
    Hello!
    <div>
    	<slot>這是預設內容</slot>
		</div>
  </div>`,
  data() {
    return {
      msg: 'Child !'
    }
  }
});

app.mount('#app');