登录
搜索到
1
篇与
vue
的结果
-
vue子组件向父级(组件)传递数据 组件通信 子组件向父组件通信 案例：点击组件按钮，改变父级数据的值 父级数值为：{{num}} 引入子组件 总结：子组件与父组件去通信(传递数据)，本质是子组件的方法绑定父组件的方法，通过方法传递参数到父组件的方法，方法返回的对象然后再传递给子组件 //定义组件 const operation = { template:` + - `, props:["num"], methods:{ //组件方法，去调用父方法实现数据通信 incrNum(){ return this.$emit("plus"); }, decrNum(){ return this.$emit("reduce"); } } }; var app = new Vue({ el:"#app", data:{ num:0 }, //注册组件时：组件的定义要在上面，否则会报错：找不到组件 components:{ operation:operation }, methods:{ numPlus(){ this.num++; }, numReduce(){ this.num--; } } }); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件通信</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="app"> <h2>子组件向父组件通信</h2> <b>案例：</b>点击组件按钮，改变父级数据的值 <h2>父级数值为：{{num}}</h2> <hr> <b>引入子组件</b> <!--在实例中引入方法--> <operation @plus="numPlus" @reduce="numReduce" :num="num"></operation> <hr> <p>总结：子组件与父组件去通信(传递数据)，本质是子组件的方法绑定父组件的方法，通过方法传递参数到父组件的方法，方法返回的对象然后再传递给子组件</p> <hr> </div> <script type="text/javascript"> //定义组件 const operation = { template:` <div> <!--vue模板中不允许同时出现两个根元素--> <button @click="incrNum">+</button> <button @click="decrNum">-</button> </div> `, props:["num"], methods:{ //组件方法，去调用父方法实现数据通信 incrNum(){ return this.$emit("plus"); }, decrNum(){ return this.$emit("reduce"); } } }; var app = new Vue({ el:"#app", data:{ num:0 }, //注册组件时：组件的定义要在上面，否则会报错：找不到组件 components:{ operation:operation }, methods:{ numPlus(){ this.num++; }, numReduce(){ this.num--; } } }); </script> </body> </html>
