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 :count="count" @update="updateCount"></my-component>
  </div>

JavaScript

const app = Vue.createApp({
      setup() {
        const count = Vue.ref(0);
        // data 參數可以隨意定義，跟元件沒關係
        const updateCount = (data) => {
          console.log(data); // 你可以把資料印出來看看是不是元件丟出來的 5
          count.value += data;
        };
        return {
          count,
          updateCount,
        };
      },
    });

    app.component("my-component", {
      template: `
        <div>{{count}}</div>
        <button @click="$emit('update',5)">增加</button>
      `,
      props: ["count"],
      // 宣告一個 emits
      emits: ["update"],
    });

    app.mount("#app");