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);
        const updateCount = () => {
          count.value++
        }
        return {
          count,
          updateCount
        };
      },
    });

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

    app.mount("#app");