我如何从组件中的vue函数传递参数?
How can i pass parametres from vue function in component?
我必须调用带有参数的函数,但我没有找到解决我的问题的正确方法。 NavigateTo 应该将一个字符串值传递给我的索引以切换它并导航到正确的组件(无 vue 路由器)。
Home.js
Vue.component('Home', {
props: ['visible','logged'],
data: function (){
return{
}
},
template: <a class="btn btn-primary display-4" on:click="NavigateTo(accedi)">Accedi</a>\n'
(only the button that call the function,i will post the rest of the code only if necessary)
methods:{
NavigateTo:function(destination){
this.$emit('transit-inner', destination);
}
}
});
Index.js
<section id="Home" style="margin-top: 60px">
<Home v-bind:visible="visible" v-bind:logged="session_info" v-on:transit-inner="goto()"></Home>
<script>
new Vue({
el: '#Home',
data:{
visible: routes.visible_home,
session_info: routes.status_session
},
methods:{
goto: function (destination){
alert(destination);
}
}
})
</script>
</section>
您正在模板中使用内联事件处理程序 (goto()
):
<Home v-bind:visible="visible" v-bind:logged="session_info" v-on:transit-inner="goto()"></Home>
你有两个选择:
一、去掉()
<Home v-bind:visible="visible" v-bind:logged="session_info" v-on:transit-inner="goto"></Home>
或者,如果使用 Inline Handler
,则提供 $event
特殊变量
<Home v-bind:visible="visible" v-bind:logged="session_info" v-on:transit-inner="goto($event)"></Home>
我必须调用带有参数的函数,但我没有找到解决我的问题的正确方法。 NavigateTo 应该将一个字符串值传递给我的索引以切换它并导航到正确的组件(无 vue 路由器)。
Home.js
Vue.component('Home', {
props: ['visible','logged'],
data: function (){
return{
}
},
template: <a class="btn btn-primary display-4" on:click="NavigateTo(accedi)">Accedi</a>\n'
(only the button that call the function,i will post the rest of the code only if necessary)
methods:{
NavigateTo:function(destination){
this.$emit('transit-inner', destination);
}
}
});
Index.js
<section id="Home" style="margin-top: 60px">
<Home v-bind:visible="visible" v-bind:logged="session_info" v-on:transit-inner="goto()"></Home>
<script>
new Vue({
el: '#Home',
data:{
visible: routes.visible_home,
session_info: routes.status_session
},
methods:{
goto: function (destination){
alert(destination);
}
}
})
</script>
</section>
您正在模板中使用内联事件处理程序 (goto()
):
<Home v-bind:visible="visible" v-bind:logged="session_info" v-on:transit-inner="goto()"></Home>
你有两个选择:
一、去掉()
<Home v-bind:visible="visible" v-bind:logged="session_info" v-on:transit-inner="goto"></Home>
或者,如果使用 Inline Handler
,则提供$event
特殊变量
<Home v-bind:visible="visible" v-bind:logged="session_info" v-on:transit-inner="goto($event)"></Home>