子组件向父组件传值--调用父组件的有参方法【必看】
咳咳,我来啦,今天我来补充一下,说一下Vue的子组件向父组件传值 的 调用父组件的有参方法想要父组件调用无参的方法参考地址为:https://blog.csdn.net/weixin_43814195/article/details/84899700话不多说,上代码!!啦啦啦啦<!DOCTYPE html><
·
咳咳,我来啦,今天我来补充一下,说一下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>
效果图如下:
完美!!好啦,调用有参的方法就这样好啦!!
如有错误,请在下方留言!!!谢谢!!
更多推荐
已为社区贡献2条内容
所有评论(0)