Vue3中如何修改<GoogleLogin />组件的按钮文本

你可以通过两种方式修改<GoogleLogin>组件的按钮文本：

方法一：使用组件内置的label属性 #

vue3-google-oauth2的GoogleLogin组件提供了label属性，直接传入自定义文本即可替换默认的"Sign in with Google"：

修改模板中的组件调用：

<GoogleLogin :callback="callback" label="Sign up with Google" />

完整修改后的模板代码：

<template>
  <div>
    <div v-if="loggedIn">
      <button @click="logout" id="signout_button">logout</button>
      <h3>The name is: {{ user.name }}</h3>
      <h3>The email is: {{ user.email }}</h3>
      <img :src="user.picture" alt="" />
    </div>
    <div v-else>
      <!-- 新增label属性自定义按钮文本 -->
      <GoogleLogin :callback="callback" label="Sign up with Google" />
    </div>
  </div>
</template>

方法二：使用默认插槽完全自定义按钮内容 #

如果需要更灵活的按钮样式或内容（比如添加自定义图标、调整排版），可以使用组件的默认插槽，完全控制按钮内部的显示元素：

<GoogleLogin :callback="callback">
  <span>Sign up with Google</span>
  <!-- 可在此添加Google图标等额外元素 -->
</GoogleLogin>

这种方式既保留了组件的OAuth回调逻辑，又能实现高度自定义的按钮外观。

内容的提问来源于stack exchange，提问作者Chaimae GRICH