使用当前 vue 组件的方法作为默认 prop 值 [英] Use current vue component's method as default prop value

问题描述

我将把函数作为属性传递给 Vue 组件.让它成为必须由 @click 调用的函数.但出于某些原因，我想保留组件的默认行为.默认行为并不像我想要的那么简单，我将使用 method 作为默认函数.因为默认行为需要来自组件状态的数据(道具、数据、其他方法，等等).

有办法吗?

我附上了示例.预期行为:

按钮工作正常应该产生警报不客气！
按钮 nope 应该产生警报 也欢迎你！ 但什么都不做.

Vue.component('welcome-component', {模板:'#welcome-component',道具: {姓名: {类型:字符串，要求:真实，},行动: {类型:功能，要求:假，默认值:() =>{ this.innerMethod() },},},方法: {内部方法(){alert("也欢迎你！");}}});var app = new Vue({el: "#app",方法: {外部方法(){alert("不客气！");}}});

#app {边距:20px；}.持有人 >按钮 {边距:10px；填充:5px；字体大小:1.1em；}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="应用程序"><welcome-component name="工作正常" :action="externalMethod"></welcome-component><welcome-component name="nope"></welcome-component>

<script id='welcome-component' type='x-template'><div class="holder"><button @click="action">{{ name }}</button>

</script>

解决方案

这可行，但它是一大堆扳手:

动作:{要求:假，默认 () {返回 () =>this.innerMethod();},},

我不得不删除type:Function.通常当 default 是一个函数时，它会被调用以返回适当的默认值.但是，如果 prop 具有 type:Function 它只会将该函数视为默认值.在这种情况下，这是有问题的，因为我们失去了 this 绑定.

需要内部箭头函数来解决调用default函数时方法不可用的问题.

如果可能的话，我建议放弃使用 default 而只是在需要调用时应用默认".因此，与其直接在 click 处理程序中调用 action，不如调用一个名为 invokeAction 的方法，它看起来像这样:

invokeAction() {如果(this.action){this.action();} 别的 {this.innerMethod();}}

I am going to pass function as property to Vue component. Let it be function has to be invoked by @click. But for some reasons I want to keep default behaviour for the component. The default behaviour is not so easy as I want and I'm going to use method as default function. Because the default behaviour requires data from component's state (props, data, other methods, whatever).

Is there a way to do?

I've attached the example. Expected behaviour:

Button works fine should produce alert You are welcome!
Button nope should produce alert You are welcome as well! but does nothing.

Vue.component('welcome-component', {
  template: '#welcome-component',
  props: {
    name: {
      type: String,
      required: true,
    },
    action: {
      type: Function,
      required: false,
      default: () => { this.innerMethod() },
    },
  },
  methods: {
    innerMethod() {
      alert("You are welcome as well!");
    }
  }
});


var app = new Vue({
  el: "#app",
  methods: {
    externalMethod() {
      alert("You are welcome!");
    }
  }
});

#app {
  margin: 20px;
}

.holder > button {
  margin: 10px;
  padding: 5px;
  font-size: 1.1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <welcome-component name="works fine" :action="externalMethod"></welcome-component>
  <welcome-component name="nope"></welcome-component>
</div>


<script id='welcome-component' type='x-template'>
  <div class="holder">
    <button @click="action">{{ name }}</button>
  </div>
</script>

解决方案

This works but it's a total bag of spanners:

action: {
  required: false,
  default () { 
    return () => this.innerMethod();
  },
},

I've had to remove the type: Function. Usually when default is a function it will be invoked to return the appropriate default value. However, if the prop has type: Function it'll just treat the function as the default. In this case that's problematic because we lose the this binding.

The internal arrow function is required to get around the problem that the methods aren't available when the default function is called.

If possible I would suggest giving up on using a default and instead just apply the 'default' when it needs to be invoked. So rather than calling action directly in the click handler, instead call a method called invokeAction that looks something like this:

invokeAction () {
  if (this.action) {
    this.action();
  } else {
    this.innerMethod();
  }
}

这篇关于使用当前 vue 组件的方法作为默认 prop 值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！