如何在全局 vue 组件中调用方法?
How can I call method in global vue component?
我有根 vue 组件 app.js:
...
const app = new Vue({
el: '#app',
...
methods: {
modalShow: function(target, id=null, message=null){
...
},
...
}
});
我有一个这样的子组件:
<template>
<div>
<ul>
<li>
<a href="#" class="thumbnail"
title="Add photo"
@click="modalShow('modal-add-photo', product.id)"
>
<span class="fa fa-plus fa-2x"></span>
</a>
</li>
</ul>
</div>
</template>
<script>
export default {
...
methods: {
...
}
}
</script>
modalShow
方法在根目录中。怎么才能从子叫呢?
如果现在执行上面的代码,我会得到以下错误:
[Vue warn]: Property or method "modalShow" is not defined on the
instance but referenced during render. Make sure to declare reactive
data properties in the data option.
将 modalShow
方法传递给 child 组件。
<child :modal-show="modalShow"></child>
export default {
props:["modalShow"]
}
那么就可以使用child中的方法了。
我有根 vue 组件 app.js:
...
const app = new Vue({
el: '#app',
...
methods: {
modalShow: function(target, id=null, message=null){
...
},
...
}
});
我有一个这样的子组件:
<template>
<div>
<ul>
<li>
<a href="#" class="thumbnail"
title="Add photo"
@click="modalShow('modal-add-photo', product.id)"
>
<span class="fa fa-plus fa-2x"></span>
</a>
</li>
</ul>
</div>
</template>
<script>
export default {
...
methods: {
...
}
}
</script>
modalShow
方法在根目录中。怎么才能从子叫呢?
如果现在执行上面的代码,我会得到以下错误:
[Vue warn]: Property or method "modalShow" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
将 modalShow
方法传递给 child 组件。
<child :modal-show="modalShow"></child>
export default {
props:["modalShow"]
}
那么就可以使用child中的方法了。