本篇內(nèi)容介紹了“Vue中的非單文件組件如何使用”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
成都創(chuàng)新互聯(lián)公司主營舒城網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶APP軟件開發(fā),舒城h5小程序設(shè)計(jì)搭建,舒城網(wǎng)站營銷推廣歡迎舒城等地區(qū)企業(yè)咨詢
實(shí)現(xiàn)應(yīng)用中局部功能代和資源的集合（簡單來說就是將html，js，css，資源整合起來的一個(gè)小盒子）
理解：用來實(shí)現(xiàn)局部(特定)功能效果的代碼集合
為什么：一個(gè)界面的功能很復(fù)雜
作用：復(fù)用編碼，簡化項(xiàng)目編碼，提高運(yùn)行效率
組件又分為非單文件組件和單文件組件，一般常用的就是單文件組件。
2.1使用組件的三大步驟
(1)如何定義一個(gè)組件?
使用Vue.extend(options )創(chuàng)建，其中options和new Vue(options)時(shí)傳 入的那個(gè)options兒乎一樣。但是也略有不同，組件內(nèi)不需要寫el該屬性，因?yàn)榻M件是直接服務(wù)于Vue實(shí)例的，所以并不需要在組件內(nèi)寫，并且組件寫完之后不只是服務(wù)于一個(gè)地方，這里就體現(xiàn)了組件的復(fù)用性，所以組件不能寫el。
(2)如何注冊組件?
1.局部注冊:靠new Vue的時(shí)候傳入components選項(xiàng)
2.全局注冊:靠Vue.component( '組件名,組件)
(3)如何使用組件
編寫組件標(biāo)簽（使用組件）
下面是創(chuàng)建非單文件組件的全過程
(4)為什么data必須寫成函數(shù)？
避免組件被復(fù)用時(shí)，數(shù)據(jù)存在引用關(guān)系。
注:使用template 可以配置組件結(jié)構(gòu)。
1）關(guān)于組件名
一個(gè)單詞組成: 第一種寫法( 首字母小寫):+ school，第二種寫法(首字母大寫) School
多個(gè)單詞組成: 第一種寫法(kebab-case命 名):my-school，第二種寫法(Came1Case命 名): MySchool (需要Vue腳手架支持)
注:
(1)，組件名盡可能回避HTML中已有的元素名稱，例如: h3、 H2都不行。
(2).可以使用name配置項(xiàng)指定組件在開發(fā)者工具中呈現(xiàn)的名字。
2）關(guān)于組件標(biāo)簽
第1種寫法:
第2種寫法:
3）簡寫方式
const school = Vue.extend(options)可簡寫為: const school = {options}
2.2組件的嵌套
和俄羅斯套娃差不多，大件套小件（其實(shí)vm下面還有一個(gè)名為app的組件，他管理著所有的組件）
school組件本質(zhì)是一個(gè) 名為VueComponent的構(gòu)造函數(shù)，且不是程序員定義的，是Vue.extend生成的。
只需要寫
每次調(diào)用Vue.extend,返回的都是一一個(gè)全新的VueComponent（雖然雙胞胎特別像但是無論怎么來說也不是相同的一個(gè)人）
this指向
(1).組件配置中data函數(shù)、methods中的函數(shù)、watch中的函數(shù)、computed中的兩數(shù)它們的this均 是[VueComponent實(shí)例對象]。
(2) new Vue(options )配置中data函數(shù)、methods中的函數(shù)、watch中的函數(shù)、computed中 的函數(shù) 它們的this均是[Vue實(shí)例對象]。
“Vue中的非單文件組件如何使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
重慶分公司
重慶分公司
