我将把功能作为属性传递给Vue组件。让它成为必须由@click
调用的函数。但是出于某些原因,我想保留组件的默认行为。默认行为不是我想要的那么容易,我将使用method
作为默认函数。因为默认行为需要来自组件状态的数据(属性,数据,其他方法,等等)。
有办法吗?
我已附上示例。预期的行为:
按钮works fine
应该会产生警报You are welcome!
按钮nope
应该会产生警报You are welcome as well!
,但什么也没做。
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>
答案 0 :(得分:2)
这行得通,但总共是扳手:
action: {
required: false,
default () {
return () => this.innerMethod();
},
},
我必须删除type: Function
。通常,当default
是一个函数时,它将被调用以返回适当的默认值。但是,如果prop具有type: Function
,它将仅将函数视为默认函数。在这种情况下,这是有问题的,因为我们失去了this
绑定。
需要内部箭头函数来解决调用default
函数时方法不可用的问题。
如果可能的话,我建议放弃使用default
,而只在需要调用“ default”时应用它。因此,与其直接在action
处理程序中调用click
,而是调用一个看起来像这样的名为invokeAction
的方法:
invokeAction () {
if (this.action) {
this.action();
} else {
this.innerMethod();
}
}
答案 1 :(得分:1)
来自vue文档:
"Note that props are validated before a component instance is created, so instance properties (e.g. data, computed, etc) will not be available inside default or validator functions."
(https://vuejs.org/v2/guide/components-props.html)
因此,引用innerMethod
是组件功能尚不可用的情况之一。
想法:如果对您来说至关重要的是拥有这种功能,则可以在以后的生命周期挂钩中(例如创建,安装等)检查action
的类型是否为function
。如果不是函数(表示未通过prop传递),请手动分配innerMethod。