溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“Vue中的非單文件組件如何使用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
實現應用中局部功能代和資源的集合（簡單來說就是將html，js，css，資源整合起來的一個小盒子）
理解：用來實現局部(特定)功能效果的代碼集合
為什么：一個界面的功能很復雜
作用：復用編碼，簡化項目編碼，提高運行效率
組件又分為非單文件組件和單文件組件，一般常用的就是單文件組件。
2.1使用組件的三大步驟
(1)如何定義一個組件?
使用Vue.extend(options )創建，其中options和new Vue(options)時傳 入的那個options兒乎一樣。但是也略有不同，組件內不需要寫el該屬性，因為組件是直接服務于Vue實例的，所以并不需要在組件內寫，并且組件寫完之后不只是服務于一個地方，這里就體現了組件的復用性，所以組件不能寫el。
(2)如何注冊組件?
1.局部注冊:靠new Vue的時候傳入components選項
2.全局注冊:靠Vue.component( '組件名,組件)
(3)如何使用組件
編寫組件標簽（使用組件）
下面是創建非單文件組件的全過程
(4)為什么data必須寫成函數？
避免組件被復用時，數據存在引用關系。
注:使用template 可以配置組件結構。
<body>
<div id="user">
<!-- 第3步使用組件編寫組件標簽 -->
<school></school>
<br>
<xuesheng></xuesheng>
</div>
<div class="user2">
<hello></hello>
</div>
</body>
<script>
// 第一步：創建組件
// 創建school組件
const school = Vue.extend({
template: `
<div>
<h3>學校名稱：{{schoolName}}</h3>
<h3>地址：{{address}}</h3>
</div>
`,
// 組件里不用寫el也不能寫el，而且組件里必須寫函數式
data() {
return {
schoolName: '山魚屋',
address: 'Nanbian'
}
}
})
// 創建student組件
const student = Vue.extend({
template: `
<div>
<h3>學生名稱：{{studentName}}</h3>
<h3>年齡：{{age}}</h3>
<button @click = 'showName'>點我出名</button>
</div>
`,
// 組件里不用寫el也不能寫el，而且組件里必須寫函數式
data() {
return {
studentName: '山魚屋',
age: 20
}
},
methods: {
showName() {
alert(this.studentName)
}
},
})
// 創建全局組件
const hello = Vue.extend({
template: `
<div>
<h3>你好呀！{{name}}</h3>
</div>
`,
data() {
return {
name: 'shanyu',
}
}
})
// 注冊全局的組件
Vue.component('hello', hello);
// 創建vm
new Vue({
el: '#user',
// 第2步.注冊組件
components: {
// 鍵值對形式（若鍵值對同名可簡寫）
school,
xuesheng: student
}
})
new Vue({
el: '.user2',
})
</script>
1）關于組件名
一個單詞組成: 第一種寫法( 首字母小寫):+ school，第二種寫法(首字母大寫) School
多個單詞組成: 第一種寫法(kebab-case命 名):my-school，第二種寫法(Came1Case命 名): MySchool (需要Vue腳手架支持)
注:
(1)，組件名盡可能回避HTML中已有的元素名稱，例如: h3、 H2都不行。
(2).可以使用name配置項指定組件在開發者工具中呈現的名字。
2）關于組件標簽
第1種寫法: <school></school>
第2種寫法: <school/> 備注:不用使用腳手架時，<schoo1/> 會導致后續組件不能渲染。
3）簡寫方式
const school = Vue.extend(options)可簡寫為: const school = {options}
2.2組件的嵌套
和俄羅斯套娃差不多，大件套小件（其實vm下面還有一個名為app的組件，他管理著所有的組件）
<body>
<div id="user">
</div>
<script>
// 創建room組件
const room = {
template:
`<div>
<h3>
房間號{{num}}
</h3>
<h3>
puwei:{{pnum}}
</h3>
</div>`,
data() {
return {
num: '222',
pnum: '8'
}
}
}
// 創建students組件
const students = {
template:
`<div>
<h3>
姓名：{{name}}
</h3>
<h3>
學號：{{studentnum}}
</h3>
<room></room>
</div>`,
data() {
return {
name: '山魚',
studentnum: '9657'
}
},
components: {
room
}
}
// 創建school組件
const school = {
template:
`<div>
<h3>
校名：{{sname}}
</h3>
<h3>
地址：{{address}}
</h3>
<students></students>
</div>`,
data() {
return {
sname: '山魚學院',
address: '華山道9088號'
}
},
components: {
students
}
}
const app = {
template:
`
<school></school>
</div>`,
components: {
school
}
}
// 創建app組件
new Vue({
template:`<app></app>`,
el: '#user',
components: {
app,
}
})
</script>
</body>
school組件本質是一個 名為VueComponent的構造函數，且不是程序員定義的，是Vue.extend生成的。
只需要寫<school/>（自閉合標簽）或<school></school>, Vue解析時會幫我們創建school組件的實例對象，也就是Vue幫我們執行的: new VueComponent(options)。
每次調用Vue.extend,返回的都是一一個全新的VueComponent（雖然雙胞胎特別像但是無論怎么來說也不是相同的一個人）
this指向
(1).組件配置中data函數、methods中的函數、watch中的函數、computed中的兩數它們的this均 是[VueComponent實例對象]。
(2) new Vue(options )配置中data函數、methods中的函數、watch中的函數、computed中 的函數 它們的this均是[Vue實例對象]。
“Vue中的非單文件組件如何使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
