我們都知道vue核心之一：元件化，vue中萬物皆元件，元件化我認為應該來至於模組化的設計思想，比如在模組化開發中，乙個模組就是乙個實現特定功能的獨立的檔案，有了模組我們就更方便去閱讀**，更方便使用別人的**，同時自己的**頁更加易於維護，還有就是比如常用到的懶載入似乎也有模組化的感覺。前端元件化應該就是模組化的表現，vue中萬物皆元件，頁面上每個元件相互獨立、視覺化、可互動化，元件之間又可以相互組合，總之，元件化我的感覺就是乙個頁面對應乙個容器，頁面頂部有導航，有輪播圖，側邊有側邊欄，中間有正文內容區域，底部也有獨立的元件，不同的頁面又根據內容需要，盛放相關的元件。要想讓容器呈現不同效果，就需要元件之間相互互動通訊。（父傳子和子傳父）
你可能不太懂什麼是父元件，什麼是子元件，更別說之間的通訊了，因為我學習的時候就不太了解怎麼區分，只是死記了下來，這裡我說下我的理解，我們將一段**封裝成乙個元件，而這個元件又在另乙個容器中使用，那麼使用這個元件的容器就叫父容器，成為了父元件，我們封裝的**就叫子元件。必須我們在使用某ui元件庫的時候，我們使用的地方叫父元件，我們傳遞的值給了子元件，根據ui庫提供的繫結方法其實就是子元件傳遞給我們使用的父元件。下面介紹一下常見的傳值方式，都省略了元件註冊的部分**，實際開發中會將元件寫在單獨的檔案中，只需要在容器中引入並使用。
總體來說就是父元件在引用的子元件中定義乙個傳值的屬性，子元件通過props接收到父元件傳來的值，同時子元件使用傳來的值，
普通的父傳子
<上面的**，div為父元件，使用了subtag子元件，通過msg屬性把值hello傳遞給子元件，子元件通過props接收到傳遞的值，並把值渲染到自己的template中。div
id>
<
subtag
msg="hello"
>
subtag
>
div>
<
script
>
vue.component(
'subtag
', }'})
newvue()
script
>
動態繫結props傳遞引數
<上面的**。div使用了子元件child,inut雙向繫結在par變數，然後將par變數通過message傳遞給子元件，子元件通過props收到message後，並將值渲染到自己的template中。div
id>
<
input
type
="text"
v-model
='par'
>
<
child
:message
='par'
>
child
>
div>
<
script
>
vue.component(
'child
', }'})
newvue(
})script
>
需要注意的是，prop 是單向繫結的：當父元件的屬性變化時，將傳導給子元件，但是不會反過來。
父向子傳遞乙個陣列並遍歷。
上面的**先遍歷後傳值，把遍歷的每一項傳給子元件，出現了這樣的效果。
總結
以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長踩坑之路會持續更新一些工作中常見的問題和技術點。
Vue元件傳值 父傳子
重點 父元件向子元件使用props屬性進行傳值 父元件 直接子元件上進行傳值 step 2 step前面不加 表示傳遞的是字串,此時的2為字串 2 t 此時的2為字串 counter step 2 step前面加 表示傳遞的是js表示式,此時的2為數字 2 t 此時的2為數字 counter 每個子...
VUE元件化 元件之間的傳值（父傳子，子傳父等）
1.父傳子 child props parent msg可以為變數 msg parent this.refs.name.xx xx parent this.children 0 xx 注 子元素不保證順序，也不是響應式，xx表示值，是響應式2.子傳父 child this.emit add good...
vue 父子元件傳值（父傳子）
在專案中經常會用到傳值的情況，今天說下父傳子的傳值方法 父元件使用 v model 繫結，並在標籤裡傳值，引入子元件 v model radio change changemax v model addcaglabel v for item in radiopay key item.value la...