子元件向父元件傳值--呼叫父元件的有參方法【必看】
阿新 • • 發佈：2018-12-10
咳咳，我來啦，今天我來補充一下，說一下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>
效果圖如下：
完美！！好啦，呼叫有參的方法就這樣好啦！！
如有錯誤，請在下方留言！！！謝謝！！