1. Komponentenmechanismus
Komponenten sind eine der leistungsstärksten Funktionen von Vue.js. Komponenten können HTML-Elemente erweitern und wiederverwendbaren Code kapseln. Auf einer hohen Ebene sind Komponenten benutzerdefinierte Elemente, denen der Compiler von Vue spezielle Funktionen hinzufügt. In einigen Fällen können Komponenten auch als native HTML-Elemente erscheinen, die um das Attribut is erweitert wurden. Bei der Registrierung einer Komponente müssen verschiedene Parameter für die Komponente angegeben werden.
Da es sich bei Komponenten um wiederverwendbare Vue-Instanzen handelt, erhalten sie dieselben Optionen wie neues Vue, z. B. Daten, Berechnung, Überwachung, Methoden und Lebenszyklus-Hooks. Die einzigen Ausnahmen sind für die Root-Instanz spezifische Optionen wie el.
### 组件的特点
* 组件可以进行任意次数的复用。
* 组件的data必须是一个函数，确保每个实例可以维护一份被返回对象的独立的拷贝，也就是任何一个组件的改变不会影响到其他组件。
let component = {
data () {
return {
count: 0 }
},
template: '<button v-on:click="count++">You clicked me {
{ count }} times.</button>'
}
一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
2. Komponentenregistrierung
Um Komponenten verwenden zu können, müssen Sie zunächst Komponenten registrieren
Globale Registrierung
Sie können Vue.component(tagName, Optionen) verwenden, um eine globale Komponente zu registrieren, die in der Vorlage jeder neu erstellten Vue-Root-Instanz
Vue.component('my-component-name',component) verwendet werden kann.Teilregistrierung
Globale Register sind oft nicht ideal. Wenn Sie beispielsweise ein Build-System wie Webpack verwenden, bedeutet die globale Registrierung aller Komponenten, dass eine Komponente auch dann in Ihrem endgültigen Build enthalten ist, wenn Sie sie nicht mehr verwenden. Dies führt zu einem unnötigen Anstieg der von Benutzern heruntergeladenen JavaScript-Dateien. Teilweise registrierte Komponenten können nur in der aktuellen Komponente verwendet werden
Globale Komponenten –> Globale Variablen
Lokale Komponenten –> Lokale Variablen
全局注册
### js代码
// 1.创建组件
let mycom = {
data() {
return {
Commsg: '组件数据'
}
},
methods:{
changeObj(){
if(this.Commsg==='组件数据'){
this.Commsg='修改后的组件数据'
}else{
this.Commsg='组件数据'
}
}
},
// 模板
template: `
<div>
<br>
组件使用
<br>
-------------------------
<br>
<span>{
{Commsg}}</span>
<span>{
{Commsg}}</span>
<button @click='changeObj'>更改数据模型中的数据</button>
</div>
`
};
// 全局注册
Vue.component('my-com',mycom)
new Vue({
el: '#app',
data: {
}
})
### html代码
<div id="app">
<my-com></my-com>
<my-com></my-com>
<my-com></my-com>
</div>
### 局部注册
### html代码
<div id="app">
<my-com-b></my-com-b>
--------------------
<my-com-a></my-com-a>
</div>
### js代码
// 创建组件
let myComA={
// 模板
template:`
<div>A组件</div>
`
};
let myComB={
components:{
'my-com-a':myComA
},
// 模板
template:`
<div>B组件
<my-com-a></my-com-a>
</div>
`
};
//全局注册
// Vue.component('my-com-a',myComA)
Vue.component('my-com-b',myComB)
new Vue({
components:{
'my-com-a':myComA
},
el:'#app',
data:{
}
})
3. Komponenteninteraktion/Kommunikation/Wertweitergabe
Komponente A verwendet Komponente B in ihrer Vorlage. Sie müssen miteinander kommunizieren: Die übergeordnete Komponente kann Daten an die untergeordnete Komponente senden und die untergeordnete Komponente kann die übergeordnete Komponente darüber informieren, was in ihr passiert ist. In Vue kann die Beziehung zwischen übergeordneten und untergeordneten Komponenten zusammengefasst werden, indem Requisiten weitergegeben und Ereignisse weitergegeben werden. Die übergeordnete Komponente sendet Daten über Requisiten an die untergeordnete Komponente, und die untergeordnete Komponente sendet über Ereignisse Nachrichten an die übergeordnete Komponente.
1. Verwenden Sie die übergeordneten Komponentendaten parent-child in der untergeordneten Komponente
1. Die übergeordnete Komponente übergibt Daten an die untergeordnete Komponente (statische Eigenschaften und dynamische Eigenschaften können übergeben werden).
2. Unterkomponenten empfangen und verarbeiten Daten
{
props:['title','msg','attrA],
Vorlage:``
}
2. Verwenden Sie die Daten der untergeordneten Komponente in der übergeordneten Komponente
Das Ereignis gibt ein benutzerdefiniertes Ereignis aus
In der untergeordneten Komponente senden. In der übergeordneten Komponente empfangen
Startzeitpunkt der Unterkomponente
1. Manuelles Senden per Knopfdruck
2. Überwachen Sie Datenänderungen in Unterkomponenten und geben Sie sie dann aus
在子组件内监听comMsg的变化，this.$emit('',this.comMsg)Der Event-Handler-Aufruf der übergeordneten Komponente kann die Daten im Datenmodell der übergeordneten Komponente ändern und synchron in der Ansicht der übergeordneten Komponente widerspiegeln
### 父组件传递数据给子组件
### html代码
<div id="app">
<!-- 父组件给子组件传递数据 -->
<my-com :msg='msg' title='父组件向子组件传值' attr-a='父组件给自组件的静态数据'></my-com>
</div>
### js代码
// 创建组件
let myCom={
// 接受父组件传递的数据
props:['title','msg','attrA'],
data(){
return {
}
},
template:`
<div>组件通信
<br>
<span>{
{msg}}--{
{title}}--{
{attrA}}</span>
</div>
`
}
new Vue({
components:{
"my-com":myCom
},
el:"#app",
data:{
msg:'我是父组件'
}
})
### 子组件向父组件传递数据
### html代码
<div id="app">
{
{
msg}}
<my-a title='父组件静态数据' :msg='msg' data-attr='父组件静态数据' @my-event='handler'> </my-a>
</div>
</div>
### js代码
<script>
// 创建组件
let myA={
props:['title','msg','dataAttr'],
data(){
return {
subMsg:'子组件数据'
}
},
methods:{
toSend(){
// 参数 第一个参数自定义事件名称 第二个参数传递的数据
this.$emit('my-event',this.subMsg,100)
}
},
template:`
<div>
{
{
subMsg}}--
{
{
msg}}--
{
{
dataAttr}}--
<button @click='toSend'>发射数据</button>
</div>
};
// 全局注册
Vue.component('my-a',myA)
new Vue({
el:"#app",
data:{
msg:'父组件数据'
},
methods: {
handler(a,b){
console.log(a,b)
}
},
})
4. Komponentenübergabewert
Die übergeordnete Komponente übergibt Parameter über die Eigenschaftsbindung an die untergeordnete Komponente, und die untergeordnete Komponente deklariert die Parameter, die voraussichtlich von der übergeordneten Komponente über Requisiten abgerufen werden. Der Requisitenname von „camelCase“ (Kamel-Case-Benennungsmethode) muss mit dem entsprechenden „kebab-case“ (durch Bindestriche getrennte Benennungsmethode) benannt werden:
Erwarten Sie, dass jede Requisite einen angegebenen Werttyp hat. An dieser Stelle können Sie Requisiten in Form von Objekten auflisten, und die Namen und Werte dieser Eigenschaften sind die jeweiligen Namen und Typen der Requisiten
Wenn die übergeordnete Komponente Daten an die untergeordnete Komponente übergibt, kann die untergeordnete Komponente den Datentyp definieren.
Statische Parameterübergabe: ohne Doppelpunkt, Übergabe einer Zeichenfolge
. Dynamische Parameterübergabe: Fügen Sie einen Doppelpunkt hinzu, übergeben Sie einen Wert vom Typ Zahl, Boolescher Wert, Objekt oder Array , variabel
props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise // oder jeder andere Konstruktor }
Requisitenvalidierung
Wir können Validierungsanforderungen für Komponenten-Requisiten festlegen, wie Sie diese Typen kennen. Wenn eine Anforderung nicht erfüllt ist, warnt Vue Sie in der Browserkonsole. Dies ist besonders hilfreich, wenn Sie eine Komponente entwickeln, die von anderen verwendet werden soll.
Vue.component('my-component', { props: { // grundlegende Typprüfung ( und besteht jede Typvalidierung) propA: Number, // mehrere mögliche Typen propB: [String, Number], // erforderlicher gefüllter String propC : { Typ: String, erforderlich: true }, // Zahl mit Standardwert propD: { Typ: Zahl, Standard: 100 } })
nullundefined
### js代码
// 创建组件
let myA={
props:['title','msg'],
data(){
return {
subMsg:'子组件'
}
},
template:`
<div>
{
{title}}-{
{msg}}
</div>
`
}
Vue.component(
'my-a',myA
)
new Vue({
el:'#app',
data:{
msg:'父组件'
}
})
### html代码
<div id="app">
{
{
msg}}
<my-a title='hello' :msg='msg' ></my-a>
</div>
### html代码
<div id="app">
{
{
msg}}
<!-- <my-a sub-msg="父给子" :stus="[1,2,3]" :is-active="undefined"></my-a> -->
<!-- <my-a sub-msg="父给子" :stus="[1,2,3]" :is-active="true"></my-a> -->
<my-a :msg="msg" sub-msg="父给子" :is-active="true" :age="80"></my-a>
</div>
### js代码
let myA = {
props: {
msg: String,
subMsg: String,
// stus: Array,
stus: {
type: Array,
// 错误
// default: [6, 7, 8]
// 正确 Object/Array要一个工厂函数返回默认值
default() {
return [6, 7, 8];
}
},
// isActive: Boolean
isActive: [String, Boolean],
name: {
type: String,
// 必填项
// required: true
default: "lisi"
},
// 自定义校验规则
age: {
type: Number,
// 校验器
// value 是形参，实参是将来父组件给子组件传递的数据
validator(value) {
/* if(value>50){
return true;
}else{
return false;
} */
return value > 50;
}
}
},
template: `
<div>
{
{subMsg}}
{
{stus}}
{
{isActive}}
{
{name}}
{
{age}}
{
{msg}}
</div>
`
};
Vue.component('my-a', myA);
let vm = new Vue({
el: '#app',
data: {
msg: 'hello'
},
methods: {
}
})
Unidirektionaler Datenfluss (Richtung der Datenänderung)
Die übergeordnete Komponente kann die Daten der untergeordneten Komponente ändern.
Das übergeordnete Element kann das untergeordnete Element ändern.
Die untergeordnete Komponente kann die Daten der übergeordneten Komponente nicht ändern.
Das untergeordnete Element kann das übergeordnete Element nicht ändern.Ändern Sie die Nachricht der übergeordneten Komponente und ändern Sie die Nachricht der untergeordneten Komponente, aber nicht umgekehrt
vm.msg='hello vue' beobachtet Änderungen in Unterkomponenten