JSFiddle - React, Tailwind, and code Playground

by imall

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <my-component :message="msg"></my-component>
  <button @click="changeData">更換資料</button>
</div>

JavaScript

const app = Vue.createApp({
	setup(){
  	const msg = Vue.ref('這是一筆資料');
    const changeData = () => {
    	msg.value = '這是抽換的資料'
    }
    return{
    	msg,changeData
    }
  }

});

app.component('my-component', {
  template: `
    <div>
      <div> {{ message }} </div>
    </div>`,
    // message 是自己定義的變數
  props: ["message"]
});

app.mount('#app');