分享Vue組件傳值的幾種常用方式(一)
前言
大傢好,這個系列我們來講解一下vue組件傳值的幾種常見方法和邏輯鏈路。最常見的vue組件傳值分為三種,第一種是父向子傳值,第二種是子向父傳值,第三種是兄弟組件之間的傳值,下面我們先就第一種情況來進行分析和編寫。
第一種:父向子傳值
父向子傳值意思就是要把父組件裡的值傳遞給子組件,方法是在子組件內部自定義一個props屬性,通過props屬性來完成父子組件之間的數據傳輸。
新建文件導入結構
首先我們在components文件夾之下新建兩個文件分別是Father.vue和Son.vue,並在這兩個文件中通過shift + "<" 鍵快速生成結構,如圖
引入 註冊 使用子組件
第二步,我們把Son作為子組件引入進父組件,並完成註冊以及在template模板裡使用Son的實例
<template> <div class="box2"> <!-- 使用Son的實例 --> <Son></Son> </div> </template> <script> // 導入Son構造函數 import Son from '@/components/Son.vue' export default { // 在component中完成註冊 components: { Son, }, } </script> <style lang="less"></style>
註意:這裡style括號內設置lang="less",代表我們可以在style樣式結構中使用less語句
子組件內部代碼完善
第三步我們要在Son組件中完成我們自己的代碼書寫,首先我們可以在template模板中定義一個box盒子,裡面放入幾個標簽,並在其內部放入插值表達式。接著我們要在子組件的導出模塊中定義一個props自定義屬性,這裡我們采用數組的形式在其內部定義兩個屬性分別是'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>
父組件內部代碼完善
在父組件中,我們需要在data區域中返回兩個值,如圖
同時在template模板中,我們可以定義一個標簽,在其內部放入一個插值表達式檢驗父組件自身是否已經正確拿到值,
如圖:
同時,在Son實例中,我們將利用v-bind方法給它動態綁定屬性,屬性名就是Son構造函數中的props自定義屬性,值就是Father中data內部定義的值
代碼如下:
<template> <div class="box2"> <!-- 使用Son的實例 --> <h1>我是父組件,我自身的值是--{{ dd }}</h1> <Son :msg="dd" :age="year"></Son> </div> </template> <script> // 導入Son構造函數 import Son from '@/components/Son.vue' export default { // 在component中完成註冊 components: { Son, }, data() { return { dd: '加也加也', year: 15, } }, } </script> <style lang="less"> .box2 { // 父組件自身內部標簽 h1 { color: orange; } } </style>
操作main.js文件
我們需要在main.js文件中導入父組件,取名為Father,並且在render區域將父組件的名字輸入進去,
如圖:
運行文件:
在終端裡利用指令"npm run serve"來進行文件編譯,打開第一個網站查看效果
效果:
這樣我們就完成瞭整個父組件向子組件傳值的流程
思路總結
到這裡,我們來大致厘清一下具體實現步驟
第一步,將子組件導入到父組件中,並完成在父組件內部的註冊和使用
第二步:在子組件中設置自定義屬性props並為其添加幾個字符串作為在父組件中的屬性名
第三步:在子組件中的template模板中利用插值表達式來直觀的演示我們調試過後的結果
第四步:在父組件中對data區域進行操作,return一個對象,提供渲染時所依賴的數據源
第五步,在父組件中的template模板中利用插值表達式來看父組件自身是否能接收到data中的值,並且為子組件的實例綁定動態屬性
最後,在main.js中導入父組件,並且在render區域將父組件的名字輸入進去,在終端裡面利用指令"npm run serve"來進行文件編譯,打開網站查看效果
到此這篇關於分享Vue組件傳值的幾種常用方式(一)的文章就介紹到這瞭,更多相關Vue組件傳值內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!