版权声明：https://blog.csdn.net/weixin_43814195?t=1 https://blog.csdn.net/weixin_43814195/article/details/84899873
咳咳，我来啦，今天我来补充一下，说一下Vue的子组件向父组件传值 的 调用父组件的有参方法
想要父组件调用无参的方法 参考地址为：https://blog.csdn.net/weixin_43814195/article/details/84899700
话不多说，上代码！！啦啦啦啦
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子向父通信-调用父组件的有参方法</title>
<script src="../vue-2.5.17.js"></script>
</head>
<body>
<!--定义父容器-->
<div id="app">
outnum:{{outnum}}<br>
<counter @outshow="mainshow"></counter>
</div>
<script>
//定义全局
Vue.component("counter",{
//模板
template:`<button @click="show(10)">show</button>`,
//方法
methods:{
//调用的函数
show(num){
this.$emit("outshow",num)
}
}
})
var vm=new Vue({
el:"#app",
data:{
outnum:'',
},
methods:{
mainshow(myoutnum){
this.outnum=myoutnum
}
}
})
</script>
</body>
</html>
效果图如下：
完美！！好啦，调用有参的方法就这样好啦！！
如有错误，请在下方留言！！！谢谢！！