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

 app.component("my-component", {
   template: `
        <div>{{count}}</div>
        <button @click="updateNumber">增加</button>
      `,
   props: ["count"],
   // 宣告一個 emits
   emits: ["update"],
   // 在 setup 加一個 cxt 參數(名稱也可以隨意定義，但官網這麼寫，我就照寫了)
   setup(props, ctx) {
     const updateNumber = () => {
       // 假設固定要把 props.count + 1 的數值傳回外層
       const data = props.count + 1;
       // 這句可以執行 emit 方法
       ctx.emit("update", data);
     };
     return {
       updateNumber,
     };
   },
 });

 app.mount("#app");