Vue传递带v-model参数的点击函数，如何仅点击按钮时触发方法

• 你在给组件绑定click属性时，直接写了clickAccept(lname)，这种带括号传参的写法会在模板渲染时立即执行函数，只要响应式数据lname变化触发组件重渲染，这个方法就会被调用，这就是输入框内容变更时方法自动执行的原因。
• 你把点击回调作为prop传递的写法不符合Vue的事件通信规范，且你在editName组件中错误使用了原生v-btn标签，没有调用你自定义的BtnSmall组件，导致点击按钮无法触发对应逻辑。

方案1：改用Vue自定义事件（更符合最佳实践） #

第一步：修改BtnSmall组件 #

移除click相关prop，内部点击时触发自定义事件即可：

<v-btn
  class="white--text btn_main_product"
  color="red darken-1"
  @click="$emit('click')"
>
  <slot/>
</v-btn>

删除props配置中的click: Function项。

第二步：修改editName组件 #

调整模板中的组件调用逻辑，用自定义事件绑定回调，套箭头函数避免立即执行：

<template>
  <v-card
    class="pa-4"
  >
    <v-text-field
      v-model="lname"
    ></v-text-field>
    <!-- 调用自定义的BtnSmall组件，绑定click事件 -->
    <btn-small @click="() => clickAccept(lname)">
      accept
    </btn-small>
  </v-card>
</template>

<script>
import BtnSmall from "../buttons/btnSmall";

export default {
  name: "editName",
  components: {BtnSmall},
  data() {
    return {
        lname: ''
    }
  },
  props: ['clickAccept']
}
</script>

第三步：父页面逻辑无需修改 #

原来的<edit-name :click-accept="nameClickAccept"/>和nameClickAccept方法保持不变即可实现预期效果。

方案2：保留prop传函数的设计，仅修改绑定逻辑 #

如果不想调整BtnSmall的原有设计，直接修改editName组件的绑定写法即可，给prop传入箭头函数避免立即执行：

<btn-small :click="() => clickAccept(lname)">
  accept
</btn-small>

内容的提问来源于stack exchange，提问作者m kh