在Vue中分解自定义按钮

.html文件

<div id="app1">
    <button
    v-for="(button, index) in buttons"
    v-bind:key="button"
    v-on:click="buttonClick(index)"
    >
    {{ button }}
    </button>
</div>

const app1 = new Vue({
    el: '#app1',
    data: { buttons: ['A', 'B', 'C', ] },
    methods: { buttonClick: (i) => console.log(i) },
})

单击按钮时,相应的索引将记录到控制台。

我想通过创建一个自定义按钮组件来重构它,所以我试图将其更改为

.html文件( *

<div id="app2">
    <custom-button
    v-for="(button, index) in buttons"
    v-bind:key="button"
    v-on:click="buttonClick(index)"
*   v-bind:content="button",
    >
    {{ button }}
    </custom-button>
</div>

.js公司

Vue.component('custom-button', {
    props: ['content'],
    template: '<button> {{ content }} </button>'
})

(除 '#app1' 是现在 '#app2'

单击这些按钮时,不会调用任何函数(按钮甚至没有事件侦听器)。所以这种方法显然行不通,所以我想知道正确的方法是什么?