您好,登錄后才能下訂單哦!
小編給大家分享一下vue如何實(shí)現(xiàn)父子組件傳值,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
父子組件傳值
<!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 ,加:號(hào)后傳遞的為js表達(dá)式,示例中則為數(shù)字,不加:號(hào)代表的是字符串 var counter = { //局部注冊(cè) props:['count'], data:function(){//在子組件中定義數(shù)據(jù),data不能是對(duì)象,必須是一個(gè)函數(shù)。 return { number:this.count } }, template:'<div @click="handleClick2">{{number}}</div>', methods:{ handleClick2:function(){ this.number ++; //this.count++; 父組件可以傳值給子組件,但子組件不可以修改父組件屬性,這里這么寫會(huì)報(bào)錯(cuò)。 this.$emit("numberchange",this.number);//子組件向父組件傳遞事件,值 } } } var validateContent = { props:{ //content:[Number,String] //組件參數(shù)校驗(yàn),可以多選 content:{//組件參數(shù)校驗(yàn) 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, //局部注冊(cè)要在根節(jié)點(diǎn)注冊(cè)組件 validateContent } }) </script> </body> </html>
以上是“vue如何實(shí)現(xiàn)父子組件傳值”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。