vue中父子組件注意事項(xiàng),傳值及slot應(yīng)用技巧-創(chuàng)新互聯(lián)

一.父子組件傳值

專注于為中小企業(yè)提供成都網(wǎng)站建設(shè)、做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)馬尾免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了千余家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

<!DOCTYPE html>
<html lang="en">
<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++; 父組件可以傳值給子組件,但子組件不可以修改父組件屬性,這里這么寫(xiě)會(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>

新聞標(biāo)題：vue中父子組件注意事項(xiàng),傳值及slot應(yīng)用技巧-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://jinyejixie.com/article32/diphpc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、網(wǎng)站設(shè)計(jì)公司、ChatGPT、服務(wù)器托管、網(wǎng)站改版、外貿(mào)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

vue中父子組件注意事項(xiàng),傳值及slot應(yīng)用技巧-創(chuàng)新互聯(lián)