Wie verwende ich Nicht-Einzeldateikomponenten in Vue? Der folgende Artikel stellt Ihnen die Verwendung von Nicht-Einzeldatei-Komponenten in Vue vor. Ich hoffe, er wird Ihnen hilfreich sein!
Eine Sammlung lokaler Funktionen und Ressourcen in einer Anwendung (einfach ausgedrückt handelt es sich um eine kleine Box, die HTML, JS, CSS und Ressourcen integriert).
Verstehen : Eine Sammlung von Codes, die verwendet werden, um lokale (spezifische) Funktionseffekte zu erzielen
Warum: Die Funktionen einer Schnittstelle sind sehr komplex
Funktion: Codierung wiederverwenden, Projektcodierung vereinfachen und Betriebseffizienz verbessern
Komponenten sind in nicht einzelne Komponenten unterteilt Dateikomponenten und Einzeldateikomponenten werden im Allgemeinen häufig als Einzeldateikomponenten verwendet. [Verwandte Empfehlungen: vuejs-Video-Tutorial, Web-Frontend-Entwicklung]
2.1 Drei wichtige Schritte zur Verwendung. Komponenten
(1) Wie definiere ich eine Komponente?
Verwenden Sie Vue.extend(options), um sie zu erstellen, wobei die Optionen fast die gleichen sind wie die im Neuzustand übergebenen Optionen Vue(Optionen). Es ist jedoch auch etwas anders. Es ist nicht erforderlich, das el-Attribut in die Komponente zu schreiben, da die Komponente die Vue-Instanz direkt bedient, sodass es nicht erforderlich ist, es in die Komponente zu schreiben, und nachdem die Komponente geschrieben wurde, ist dies nicht der Fall dient nur einer Stelle, wie hier gezeigt Wiederverwendbarkeit von Komponenten, Komponenten können also nicht el schreiben.
3. ist der gesamte Prozess der Erstellung einer nicht-einzelnen Dateikomponente
(4) Warum müssen Daten als Funktion geschrieben werden?
Vermeiden Sie Referenzbeziehungen zwischen Daten, wenn Komponenten wiederverwendet werden.
Hinweis: Verwenden Sie eine Vorlage, um die Komponentenstruktur zu konfigurieren.
<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>
<h2>学校名称：{{schoolName}}</h2>
<h2>地址：{{address}}</h2>
</div>
`,
// 组件里不用写el也不能写el，而且组件里必须写函数式
data() {
return {
schoolName: '山鱼屋',
address: 'Nanbian'
}
}
})
// 创建student组件
const student = Vue.extend({
template: `
<div>
<h2>学生名称：{{studentName}}</h2>
<h2>年龄：{{age}}</h2>
<button @click = 'showName'>点我出名</button>
</div>
`,
// 组件里不用写el也不能写el，而且组件里必须写函数式
data() {
return {
studentName: '山鱼屋',
age: 20
}
},
methods: {
showName() {
alert(this.studentName)
}
},
})
// 创建全局组件
const hello = Vue.extend({
template: `
<div>
<h2>你好呀！{{name}}</h2>
</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) Über den Komponentennamen
bestehend aus einem Wort: die erste Schreibweise (der erste Buchstabe ist kleingeschrieben): + Schule, die zweite Schreibweise Schreibweise (der erste Buchstabe ist ein Kleinbuchstabe) Großbuchstaben) Schule
Mehrere Wörter: die erste Schreibweise (Kebab-Benennung): meine-Schule, die zweite Schreibweise (Came1Case-Benennung): MeineSchule (erfordert Vue-Gerüst Unterstützung)
Hinweis:
(1) Der Komponentenname sollte vorhandene Elementnamen in HTML so weit wie möglich vermeiden.
(2) Mit dem Konfigurationselement „Name“ können Sie den Namen der Komponente angeben, wie er in den Entwicklertools angezeigt wird.
2) Über Komponenten-Tags
Die erste Schreibweise:
Die zweite Schreibweise:
3) Die Abkürzung
const school = Vue.extend(options) kann abgekürzt werden als: const school = {options}
2.2Die Verschachtelung von Komponenten
und Verschachtelung Puppen Es ist fast dasselbe, große Dinge werden mit kleinen Dingen kombiniert (tatsächlich gibt es unter der VM eine Komponente namens App, die alle Komponenten verwaltet)
<body>
<div id="user">
</div>
<script>
// 创建room组件
const room = {
template:
`<div>
<h2>
房间号{{num}}
</h2>
<h2>
puwei:{{pnum}}
</h2>
</div>`,
data() {
return {
num: '222',
pnum: '8'
}
}
}
// 创建students组件
const students = {
template:
`<div>
<h2>
姓名：{{name}}
</h2>
<h2>
学号：{{studentnum}}
</h2>
<room></room>
</div>`,
data() {
return {
name: '山鱼',
studentnum: '9657'
}
},
components: {
room
}
}
// 创建school组件
const school = {
template:
`<div>
<h2>
校名：{{sname}}
</h2>
<h2>
地址：{{address}}
</h2>
<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>
Die Essenz von Schulkomponenten Es handelt sich um einen Konstruktor namens VueComponent, der nicht vom Programmierer definiert, sondern von Vue.extend generiert wird.
Schreiben Sie einfach
Jedes Mal, wenn Vue.extend aufgerufen wird, wird eine brandneue VueComponent zurückgegeben (obwohl die Zwillinge sich sehr ähnlich sind, sind sie ohnehin nicht dieselbe Person)
dies weist auf
(1) hin . In der Komponentenkonfiguration haben die data-Funktion, die Funktion in methods, die Funktion in watch und die beiden Zahlen in computed alle dieses [VueComponentinstance-Objekt].
(2) In der neuen Vue-Konfiguration (Optionen) sind die Funktion data, die Funktion in methods, die Funktion in watch und die Funktion in computed allesamt [Vue-Instanzobjekte].
(Teilen von Lernvideos: Vuejs-Einführungs-Tutorial, Grundlegendes Programmiervideo)
Das obige ist der detaillierte Inhalt vonEin Artikel über die Verwendung von Nicht-Einzeldateikomponenten in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
vue v-wenn
Der Unterschied zwischen vue2.0 und 3.0
So übergeben Sie einen Wert an die Vue-Komponente
Der Unterschied zwischen vue3.0 und 2.0
Vue allgemeine Anweisungen
Was sind die am häufigsten verwendeten Anweisungen in Vue?
Der Unterschied zwischen mpvue und vue
![Tatsächlicher Front-End-Vue3-Kampf [handgeschriebenes Vue-Projekt]](https://img.php.cn/upload/course/000/000/068/639b12e98e0b5441.png)
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
