小编给大家分享一下vue如何实现父子组件传值,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
专注于为中小企业提供成都网站建设、网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业温泉免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了近1000家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
父子组件传值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>父子组件传值</title> <style> </style> <script src="./vue.js"></script> </head> <body> <div id="root"> <counter :count="0" @numberchange="handleChange"></counter> <counter :count="0" @numberchange="handleChange"></counter> <div>{{total}}</div> <validate-content content="hello world"></validate-content> </div> <script> //父组件向子组件传值用 props ,加:号后传递的为js表达式,示例中则为数字,不加:号代表的是字符串 var counter = { //局部注册 props:['count'], data:function(){//在子组件中定义数据,data不能是对象,必须是一个函数。 return { number:this.count } }, template:'<div @click="handleClick2">{{number}}</div>', methods:{ handleClick2:function(){ this.number ++; //this.count++; 父组件可以传值给子组件,但子组件不可以修改父组件属性,这里这么写会报错。 this.$emit("numberchange",this.number);//子组件向父组件传递事件,值 } } } var validateContent = { props:{ //content:[Number,String] //组件参数校验,可以多选 content:{//组件参数校验 type:String, required:true, default:"default value", validator:function(value){ return value.length > 5 } } }, template:'<div >{{content}}</div>', } var vm = new Vue({ el:'#root', data:{ total:0 }, methods:{ handleChange:function(number){ console.log(number) // this.total +=1; } }, components:{ counter, //局部注册要在根节点注册组件 validateContent } }) </script> </body> </html>
以上是“vue如何实现父子组件传值”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
网站题目:vue如何实现父子组件传值
转载源于:https://www.cdcxhl.com/article12/ieshdc.html
成都网站建设公司_创新互联,为您提供Google、网站设计公司、虚拟主机、网站导航、网站建设、网站排名
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联