<div id="app">
  <div class="p-5">
    <p>
      {{` 外層num數值為: ${num}`}}
    </p>
    <button-counter
        @parent-emit-name="addNum"
        >
    </button-counter>
  </div>
</div>
  const app = Vue.createApp({
    data() {
      return {
        num: 0,
        text: ''
      };
    },
    methods: {
      addNum() {
        console.log('addNum');
        this.num++
      },
    }
  });

  app.component('button-counter', {
    methods: {
      childEmitName(){
        this.$emit('parentEmitName')
      }
    },
    template: `<button type="button" @click="childEmitName">內層button-counter按鈕</button>`
  });
  app.mount('#app');
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.37/vue.global.prod.min.js