分享Vue組件傳值的幾種常用方式(一)
前言
大家好,這個(gè)系列我們來講解一下vue組件傳值的幾種常見方法和邏輯鏈路。最常見的vue組件傳值分為三種,第一種是父向子傳值,第二種是子向父傳值,第三種是兄弟組件之間的傳值,下面我們先就第一種情況來進(jìn)行分析和編寫。
第一種:父向子傳值
父向子傳值意思就是要把父組件里的值傳遞給子組件,方法是在子組件內(nèi)部自定義一個(gè)props屬性,通過props屬性來完成父子組件之間的數(shù)據(jù)傳輸。
新建文件導(dǎo)入結(jié)構(gòu)
首先我們在components文件夾之下新建兩個(gè)文件分別是Father.vue和Son.vue,并在這兩個(gè)文件中通過shift + "<" 鍵快速生成結(jié)構(gòu),如圖
引入 注冊 使用子組件
第二步,我們把Son作為子組件引入進(jìn)父組件,并完成注冊以及在template模板里使用Son的實(shí)例
<template> <div class="box2"> <!-- 使用Son的實(shí)例 --> <Son></Son> </div> </template> <script> // 導(dǎo)入Son構(gòu)造函數(shù) import Son from '@/components/Son.vue' export default { // 在component中完成注冊 components: { Son, }, } </script> <style lang="less"></style>
注意:這里style括號內(nèi)設(shè)置lang="less",代表我們可以在style樣式結(jié)構(gòu)中使用less語句
子組件內(nèi)部代碼完善
第三步我們要在Son組件中完成我們自己的代碼書寫,首先我們可以在template模板中定義一個(gè)box盒子,里面放入幾個(gè)標(biāo)簽,并在其內(nèi)部放入插值表達(dá)式。接著我們要在子組件的導(dǎo)出模塊中定義一個(gè)props自定義屬性,這里我們采用數(shù)組的形式在其內(nèi)部定義兩個(gè)屬性分別是'msg' 和 'age', 代碼如下
<template> <div class="box"> <h2> 我是子組件,父組件給我傳遞的值是 ---{{ msg }}, 我今年 <h3>{{ age }}</h3> 歲啦 </h2> </div> </template> <script> export default { props: ['msg', 'age'], } </script> <style lang="less"> .box { h2 { color: pink; } h3 { color: skyblue; } } </style>
父組件內(nèi)部代碼完善
在父組件中,我們需要在data區(qū)域中返回兩個(gè)值,如圖
同時(shí)在template模板中,我們可以定義一個(gè)標(biāo)簽,在其內(nèi)部放入一個(gè)插值表達(dá)式檢驗(yàn)父組件自身是否已經(jīng)正確拿到值,
如圖:
同時(shí),在Son實(shí)例中,我們將利用v-bind方法給它動態(tài)綁定屬性,屬性名就是Son構(gòu)造函數(shù)中的props自定義屬性,值就是Father中data內(nèi)部定義的值
代碼如下:
<template> <div class="box2"> <!-- 使用Son的實(shí)例 --> <h1>我是父組件,我自身的值是--{{ dd }}</h1> <Son :msg="dd" :age="year"></Son> </div> </template> <script> // 導(dǎo)入Son構(gòu)造函數(shù) import Son from '@/components/Son.vue' export default { // 在component中完成注冊 components: { Son, }, data() { return { dd: '加也加也', year: 15, } }, } </script> <style lang="less"> .box2 { // 父組件自身內(nèi)部標(biāo)簽 h1 { color: orange; } } </style>
操作main.js文件
我們需要在main.js文件中導(dǎo)入父組件,取名為Father,并且在render區(qū)域?qū)⒏附M件的名字輸入進(jìn)去,
如圖:
運(yùn)行文件:
在終端里利用指令"npm run serve"來進(jìn)行文件編譯,打開第一個(gè)網(wǎng)站查看效果
效果:
這樣我們就完成了整個(gè)父組件向子組件傳值的流程
思路總結(jié)
到這里,我們來大致厘清一下具體實(shí)現(xiàn)步驟
第一步,將子組件導(dǎo)入到父組件中,并完成在父組件內(nèi)部的注冊和使用
第二步:在子組件中設(shè)置自定義屬性props并為其添加幾個(gè)字符串作為在父組件中的屬性名
第三步:在子組件中的template模板中利用插值表達(dá)式來直觀的演示我們調(diào)試過后的結(jié)果
第四步:在父組件中對data區(qū)域進(jìn)行操作,return一個(gè)對象,提供渲染時(shí)所依賴的數(shù)據(jù)源
第五步,在父組件中的template模板中利用插值表達(dá)式來看父組件自身是否能接收到data中的值,并且為子組件的實(shí)例綁定動態(tài)屬性
最后,在main.js中導(dǎo)入父組件,并且在render區(qū)域?qū)⒏附M件的名字輸入進(jìn)去,在終端里面利用指令"npm run serve"來進(jìn)行文件編譯,打開網(wǎng)站查看效果
到此這篇關(guān)于分享Vue組件傳值的幾種常用方式(一)的文章就介紹到這了,更多相關(guān)Vue組件傳值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue中異步數(shù)據(jù)獲取方式(確保數(shù)據(jù)被獲取)
這篇文章主要介紹了vue中異步數(shù)據(jù)獲取方式(確保數(shù)據(jù)被獲取),具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-01-01Vue實(shí)現(xiàn)搜索 和新聞列表功能簡單范例
本文通過實(shí)例代碼給大家介紹了Vue實(shí)現(xiàn)搜索 和新聞列表功能簡單范例,非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2018-03-03Vue項(xiàng)目優(yōu)化的一些實(shí)戰(zhàn)策略
代碼優(yōu)化不僅僅局限在業(yè)務(wù)邏輯這塊,像是代碼復(fù)用、效率等等都是我們可以加以改進(jìn)的地方,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目優(yōu)化的一些實(shí)戰(zhàn)策略,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05關(guān)于this.$refs獲取不到dom的可能原因及解決方法
這篇文章主要介紹了關(guān)于this.$refs獲取不到dom的可能原因及解決方法,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11使用vue/cli出現(xiàn)defineConfig?is?not?function錯(cuò)誤解決辦法
這篇文章主要給大家介紹了關(guān)于使用vue/cli出現(xiàn)defineConfig?is?not?function錯(cuò)誤的解決辦法,當(dāng)我們在做打包配置的時(shí)候,出現(xiàn)了這個(gè)錯(cuò)誤,需要的朋友可以參考下2023-11-11Element-ui自定義table表頭、修改列標(biāo)題樣式、添加tooltip、:render-header使用
這篇文章主要介紹了Element-ui自定義table表頭、修改列標(biāo)題樣式、添加tooltip、:render-header使用,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04