三十六、深入Vue.js组件Component（上篇）
@Author：Runsen
@Date：2020/6/15
人生最重要的不是所站的位置，而是內心所朝的方向。只要我在每篇博文中寫得自己體會，修煉身心；在每天的不斷重復學習中，耐住寂寞，練就真功，不畏艱難，奮勇前行，不忘初心，砥礪前行，人生定會有所收獲，不留遺憾 （作者：Runsen ）
作者介紹：Runsen目前大三下學期，專業化學工程與工藝，大學沉迷日語，Python， Java和一系列數據分析軟件。導致翹課嚴重，專業排名中下。.在大學60%的時間，都在CSDN。決定今天比昨天要更加努力。我的征途是星辰大海！
今天我們來學習Vue.js的component組件。在Vue中，組件是可復用的 Vue 實例，且帶有一個名字。每個頁面都是以組件樹的方式來展示其內容：
比如說，一個登陸頁面有登錄框和背景兩個組件，登錄框又由用戶名輸入框組件和密碼輸入框組件組成。而模塊的劃分，則是這個系統有三個模塊，分別是登陸注冊，用戶管理和業務管理。
本文將以具體實例講解以下幾個有關Vue.js組件的知識點：
① 如何注冊一個組件
② 組件內數據
文章目錄
- 注冊全局組件
- 局部組件
- 組件內數據
注冊全局組件
注冊一個全局組件語法格式如下：
Vue.component(tagName, options)tagName 為組件名，options 為配置選項。注冊后，我們可以使用以下方式來調用組件：
<tagName></tagName>下面實現了<runsen>
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><div id="app"><runsen></runsen></div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script>Vue.component("runsen",{template:'<h1>runsen</h1>'})new Vue({el:'#app'}) </script> </body> </html>局部組件
局部組件的寫法和全局組件差不多。
唯一不同就是：局部組件要寫在Vue實例里面。
第二個寫法：把組件的布局寫在 html 代碼里。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><div id="app"><runsen></runsen></div><!--自定義組件結構--><template id="maoli">、<h1>runsen!</h1></template> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script>new Vue({el:'#app',components:{'runsen':{// 引用 html 里需要用到的組件 idtemplate: '#maoli', }}}) </script> </body> </html>上面的結果和上圖一樣。
組件內數據
很多時候Component 組件需要傳遞數據，其實都是一樣用data
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><div id="app"><my></my></div><!--自定義組件結構--><template id="maoli"><div><!-- 注意必須在div里面不然報：Component template should contain exactly one root element --><h1>runsen!</h1><p>{{ msg }}</p></div></template> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script>new Vue({el:'#app',components:{'my':{// 引用 html 里需要用到的組件 idtemplate: '#maoli', data:function() {return {msg:"都2020了，你還不會玩Vue？趕緊上車，來不及解釋!!!!!"}},}}}) </script> </body> </html>上面這種寫法，瀏覽器會把 html 里的 template 標簽過濾掉。所以 template 標簽的內容是不會在頁面中展示的。直到它被 JS 中的 Vue 調用。
在 html 中，template 標簽一定要有一個 id，因為通過 id 是最直接被選中的。
data 和 methods 等 參數，全部都要放到 Vue 實例里面寫。
都2020了，你還不會玩Vue？趕緊上車，來不及解釋！！！
如果本文對你有幫助，大家可以點贊轉發一波，有錯誤大家可以評論指出，感謝！
大家繼續加油，未來可期！Runsen的征途是星辰大海！
總結
以上是生活随笔為你收集整理的三十六、深入Vue.js组件Component（上篇）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 电脑装完系统怎么没有声音怎么回事 电脑装
- 下一篇： 电脑重装系统win10怎么备份软件下载