具有意外参数的Vue触发功能

Question

我有以下内容：

<template>
  <button class="button" @[click]="action">{{ text }}</button>
</template>

<script>
export default {
  name: "Button",
  props: {
    action: {
      type: Function,
      required: false
    },
    text: {
      type: String,
      required: true
    },
    inputType: {
      type: String,
      required: false
    }
  },
  computed: {
    click() {
      return this.action ? "click" : null;
    }
  }
};
</script>

但是，当我通过带有参数的函数action传递函数时，该函数已经在渲染时触发。没有参数就可以正常工作。

<v-button inputType="button" :action="say('Hello')" text="Alert" />
<v-button inputType="button" :action="say" text="Alert" />

触发函数：

say(message) {
    alert(message);
}

您可以看到行为here。看着this，我希望它可以与传递的参数一起使用。

所以我的问题是如何防止渲染上的触发？

Answer 1

使用$emit

您可以代替发出一个clicked事件，而不是将函数传递给子组件。例如：

<button class="button" @click="$emit('clicked')">{{ text }}</button>

然后在组件本身上侦听发出的事件，从而触发您的功能：

<v-button inputType="button" @clicked="say('Hello')" text="Alert" />

尽管发出和处理事件是从子组件与其父组件进行通信的一种巧妙方法，但是当发出事件的组件不是直接后代时，它可能会崩溃。例如：组件是孙子。

Vue不会在组件树中隐式冒泡事件，我相信这是设计使然，以确保事件行为是明确的。

使用<slot>

在这种情况下，通常希望使用slots创建一个可以访问其创建范围的组件，然后将其嵌套在另一个子组件中。

<modal>
  <v-button @clicked="say('hi)" text="Alert"/>
</modal>

使用高阶函数

否则，如果您需要将一个函数传递给子组件，并且该函数也有一个参数，则必须将其创建为高阶函数。

在您的情况下，您想将say方法传递给带有参数的孩子。您想传递该函数但不调用它，但是当您将参数传递给say()时，您在那儿调用它，然后：

<v-btn :action="say('hi')">

这里的解决方案是重写say，以便它还返回一个函数，该函数将在单击按钮时被调用：

say (message) {
  return () => alert(message)
}

这意味着，即使没有将say传递给按钮实例，您也必须在将message方法传递给按钮组件时调用<v-button :action="say()" text="Alert"/> 方法。因此，以下方法将起作用：

<v-button :action="say" text="Alert"/>

但这不会，因为它不会调用内部函数：

ipa

希望这会有所帮助：）