首页
留言板
友链
关于
Search
1
内测“合金弹头”嘿嘿
273 阅读
2
Nginx搭建一个简易的图床
268 阅读
3
Apache Dubbo初步认识
262 阅读
4
给站点添加邮件通知功能
234 阅读
5
Maven打包插件与idea
133 阅读
知识库
好奇猫
日常说
笔记本
登录
/
注册
Search
标签搜索
maven
Java代码
idea
帆软
Java
git
MyBatis
前端
CSS
游戏
Bootstrap
生活
网上冲浪
邮件配置
说说
vue
Nginx
Excel
MySQL
数据库调优
龙流
累计撰写
44
篇文章
累计收到
10
条评论
首页
栏目
知识库
好奇猫
日常说
笔记本
页面
留言板
友链
关于
搜索到
1
篇与
vue
的结果
2021-07-09
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>
2021年07月09日
132 阅读
0 评论
0 点赞