三十六、深入Vue.js组件Component（上篇）
@Author：Runsen
@Date：2020/6/15
人生最重要的不是所站的位置，而是內(nèi)心所朝的方向。只要我在每篇博文中寫得自己體會，修煉身心；在每天的不斷重復(fù)學(xué)習(xí)中，耐住寂寞，練就真功，不畏艱難，奮勇前行，不忘初心，砥礪前行，人生定會有所收獲，不留遺憾 （作者：Runsen ）
作者介紹：Runsen目前大三下學(xué)期，專業(yè)化學(xué)工程與工藝，大學(xué)沉迷日語，Python， Java和一系列數(shù)據(jù)分析軟件。導(dǎo)致翹課嚴(yán)重，專業(yè)排名中下。.在大學(xué)60%的時間，都在CSDN。決定今天比昨天要更加努力。我的征途是星辰大海！
今天我們來學(xué)習(xí)Vue.js的component組件。在Vue中，組件是可復(fù)用的 Vue 實例，且?guī)в幸粋€名字。每個頁面都是以組件樹的方式來展示其內(nèi)容：
比如說，一個登陸頁面有登錄框和背景兩個組件，登錄框又由用戶名輸入框組件和密碼輸入框組件組成。而模塊的劃分，則是這個系統(tǒng)有三個模塊，分別是登陸注冊，用戶管理和業(yè)務(wù)管理。
本文將以具體實例講解以下幾個有關(guān)Vue.js組件的知識點：
① 如何注冊一個組件
② 組件內(nèi)數(shù)據(jù)
文章目錄
- 注冊全局組件
- 局部組件
- 組件內(nèi)數(shù)據(jù)
注冊全局組件
注冊一個全局組件語法格式如下：
Vue.component(tagName, options)tagName 為組件名，options 為配置選項。注冊后，我們可以使用以下方式來調(diào)用組件：
<tagName></tagName>下面實現(xiàn)了<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><!--自定義組件結(jié)構(gòu)--><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>上面的結(jié)果和上圖一樣。
組件內(nèi)數(shù)據(jù)
很多時候Component 組件需要傳遞數(shù)據(jù)，其實都是一樣用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><!--自定義組件結(jié)構(gòu)--><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 標(biāo)簽過濾掉。所以 template 標(biāo)簽的內(nèi)容是不會在頁面中展示的。直到它被 JS 中的 Vue 調(diào)用。
在 html 中，template 標(biāo)簽一定要有一個 id，因為通過 id 是最直接被選中的。
data 和 methods 等 參數(shù)，全部都要放到 Vue 實例里面寫。
都2020了，你還不會玩Vue？趕緊上車，來不及解釋！！！
如果本文對你有幫助，大家可以點贊轉(zhuǎn)發(fā)一波，有錯誤大家可以評論指出，感謝！
大家繼續(xù)加油，未來可期！Runsen的征途是星辰大海！
總結(jié)
以上是生活随笔為你收集整理的三十六、深入Vue.js组件Component（上篇）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 电脑装完系统怎么没有声音怎么回事 电脑装
- 下一篇： html5倒计时秒杀怎么做,vue 设