筆記1:vue 利用props 父到子元件傳值(初識元件)

大力出奇跡_____發表於2019-10-29

為...為什麼要父子元件傳值?

      但是我就很困惑,為什麼需要父子元件傳值,明明就是顯示在同一個頁面呀,父元件自己就可以做完這些事請,為什麼要交給子元件?我甚至懷疑,父元件想偷懶。。。反正就是,萌新3001問。

於是,我就真的去問了。。。

       A:“假如你是我的子元件,我告訴你要去辦一件事情(你不知道要辦什麼事情),我給你的指令(告訴你要辦的事情)就相當於傳值。”

可能是我蠢,就是這裡讓我懷疑父元件想偷懶。。。笑死自己了。

      B:“你程式碼寫在子元件裡,父元件怎麼去執行子元件的程式碼?”

我我我...好吧,突然醒悟,父元件不是想偷懶,我要寫的東西是元件,不是網頁。我們可以在父元件中使用子元件。想把子元件的東西顯示出來,必然涉及到傳值的問題。

父子元件傳值

父元件:

<template>  
    <div class='baba'> 
        {{fData}}  
        <S :fmsg='msg'></S>
    </div>
</template>
<script>
import S from '../components/S.vue'
export default {  
    data(){    
    return {     
        fData:'我是霸霸元件',     
        msg:'這是我想顯示在子元件中的內容'    
        }  
    },  
    components:{    
        S,  
        }
  }
</script>
<style>
.baba{    
color:darkgoldenrod
}
</style>複製程式碼

子元件

<template>  
        <div class='son'> 
            {{sData}}  
            <div> {{fmsg}}</div>  
        </div>
</template>
<script>
export default { 
    props:['fmsg'],  
    data(){    
    return {     
        sData:'我是兒子元件'    
        }  
    }
}
</script>
<style>
.son{    
color:blue;   
border:1px  solid red;    
width:300px;    
height: 100px;}
</style>複製程式碼

效果如下

筆記1:vue 利用props 父到子元件傳值(初識元件)

額。。。這個尺寸。。。


分析:

1、定義兩個元件:父元件、子元件

2、在父元件中引用子元件:

  •  1)註冊子元件:

  components:{    S,  }複製程式碼
  • 2)匯入子元件

import S from '../components/S.vue'複製程式碼

  • 3)使用子元件

  <S></S>複製程式碼

 這樣做僅僅只是可以把子元件顯示在父元件中,要是實現傳值,繼續分析

3、利用props傳值時父元件要做的事情:

  • 1)自定義要傳的值:(寫在自己的屬性data裡面)

     msg:'這是我想顯示在子元件中的內容'複製程式碼

  • 2)把這個自定義的屬性傳遞給子元件 (:fmsg---->冒號一定要寫,代表自定義的子元件屬性,fmsg可以隨便命名)

      <S :fmsg='msg'></S>複製程式碼

4、子元件接收:利用props----->和data處於並列關係的屬性

 props:['fmsg'],//這的fmsg就是剛剛父元件中使用子元件時定義的子元件的屬性複製程式碼

5、最後一步:顯示

  <div>{{fmsg}}</div>複製程式碼

總結:

       第一篇部落格就這麼好了,還是小白,菜的摳腳,慢慢來呀~嘻嘻嘻




相關文章