JSFiddle - React, Tailwind, and code Playground

by kurotanshi

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app"> 
  <!-- 這是外層元件的 msg -->
  <h3>{{ msg }}</h3>

  <!-- 注意這裡沒有 v-bind 或 : -->
  <my-component parent-msg="msg"></my-component>
</div>

SCSS

#app {
  display: block;
  padding: 1rem;
  font-size: 1rem;
}

.component {
  padding: 1rem;
  margin-top: 1rem;
  background-color: #ccc;
  margin-bottom: 1rem;
}

JavaScript

const app = Vue.createApp({
  data() {
    return {
      msg: '這是外層元件的 msg'
    }
  }
});

app.component('my-component', {
  template: `
    <div class="component">
      <div> 從 props 來的 parentMsg ==> {{ parentMsg }} </div>
      <div> 自己的 msg ==> {{ msg }} </div>
    </div>`,
  props: ["parentMsg"],
  data: () => {
    return {
      msg: '這是子元件的 msg'
    }
  }
});

app.mount('#app');