筆記1：vue 利用props 父到子元件傳值（初識元件）

大力出奇跡_____發表於2019-10-29
筆記Vue元件

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

      但是我就很困惑，為什麼需要父子元件傳值，明明就是顯示在同一個頁面呀，父元件自己就可以做完這些事請，為什麼要交給子元件？我甚至懷疑，父元件想偷懶。。。反正就是，萌新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>複製程式碼

總結:

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




相關文章