Heim >Web-Frontend >js-Tutorial >Was sind Vue-Komponenten? Wie verwende ich Vue-Komponenten? (Codebeispiel)
Was sind Vue-Komponenten? Wie verwende ich Vue-Komponenten? (Codebeispiel)
- 青灯夜游nach vorne
- 2018-10-24 17:38:372419Durchsuche
Dieser Artikel bietet Ihnen eine Einführung in die Vue-Komponenten. Wie verwende ich Vue-Komponenten? (Codebeispiel). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
Einführung in Komponenten
Das Komponentensystem unterteilt eine große Schnittstelle in kleinere steuerbare Einheiten.
Komponenten sind wiederverwendbar und wartbar.
Die Komponente verfügt über eine starke Kapselung und ist einfach zu verwenden.
In Großanwendungen kann die Interaktion zwischen Komponenten entkoppelt werden.
Vue-Komponenten verwenden
Globale Komponenten verwenden
nbsp;html>
<meta>
<meta>
<title>Page Title</title>
<meta>
<link>
<script></script>
<div>
<my-header></my-header>
</div>
<script>
//全局组建的定义
Vue.component("my-header", {
template: '<h1>全局组件'
});
var app = new Vue({
el: '#app',
});
</script>
Verwendung lokaler Komponenten
nbsp;html>
<meta>
<meta>
<title>Page Title</title>
<meta>
<link>
<script></script>
<div>
<my-header></my-header>
</div>
<script>
//局部组件定义
var app = new Vue({
el: '#app',
components: {
'my-header': {
template: '<h1>局部组件'
}
}
});
</script>
Eigenschaften von Komponentendaten
nbsp;html>
<meta>
<meta>
<title>Page Title</title>
<meta>
<script></script>
<div>
<my-header></my-header>
<my-header></my-header>
<br>
<my-header1></my-header1>
<my-header1></my-header1>
</div>
<script>
//组件数据之间不共享，Vue实例中的数据也不能共享给组件,并且组件中的data只能使用函数
//组件的数据data使用函数的特点是每次点击或操作组件函数会重新执行，这样就不会影响其它组件，通过下面两个例子可以看出
var data = {
count: 0
};
var app = new Vue({
el: '#app',
data: {
message: "Hello Vue!!!"
},
components: {
'my-header': {
template: '<h1 v-on:click="changeCount">{{count}}',
data: function() {
return data;
},
methods: {
changeCount: function() {
this.count++;
}
}
},
'my-header1': {
template: '<div v-on:click="changeCount1">{{count}}',
data: function() {
return {
count: 0
};
},
methods: {
changeCount1: function() {
this.count++;
}
}
}
}
});
</script>
Die Beziehung zwischen Vue-Instanzen und Komponenten
Die Vue-Komponente ist eigentlich eine erweiterbare Vue-Instanz.
nbsp;html>
<meta>
<meta>
<title>Page Title</title>
<meta>
<script></script>
<div>
{{message}}
</div>
<script>
//Vue组件其实是一个可扩展的Vue实例，Vue实例也可以看成是一个组件
// var app = new Vue({
// el: '#app',
// template: '<h1>app应用'
// });
//使用继承实现Vue组件
var myComponent = Vue.extend({
data: function() {
return {
message: "Hello Vue@@@"
}
}
});
var vm = new myComponent({
el: '#app'
});
</script>
Die Vorlagenmethode von Vue-Komponenten
`
.vue einzelne Datei
nbsp;html>
<meta>
<meta>
<title>Page Title</title>
<meta>
<script></script>
<div>
<my-header></my-header>
<my-header-1></my-header-1>
<my-header-2></my-header-2>
<my-header-3></my-header-3>
</div>
<template>
<div>
<p>
</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</template>
<script>
<div>
<p>
<ul>
<li>1
<li>2
<li>3
</script>
<script>
//Vue模版添加方式
var app = new Vue({
el: '#app',
components: {
'my-header': {
template: '<div>\
<p>\
<ul>\
<li>1\
<li>2\
<li>3\
\
\
',
data: function() {
return {
message: "第一项"
}
}
},
'my-header-1': {
template: `<div>
<p>
<ul>
<li>1
<li>2
<li>3
`,
},
'my-header-2': {
template: '#temp'
},
'my-header-3': {
template: '#temp1'
}
}
});
</script>
Die übergeordnete Vue-Komponente kommuniziert mit untergeordneten Komponenten (Requisiten)
nbsp;html>
<meta>
<meta>
<title>Page Title</title>
<meta>
<script></script>
<div>
<!-- 数据在组件中 -->
<my-header></my-header>
<!-- 父组件向子组件传递数据 -->
<my-header-1></my-header-1>
<!-- 父组件向子组件传递数据不给值 -->
<my-header-1></my-header-1>
</div>
<!-- 数据在组件中的模版 -->
<template>
<div>
<h1>{{message}}</h1>
<ul>
<li>{{item}}</li>
</ul>
</div>
</template>
<!-- 父组件向子组件传递数据的模版 -->
<template>
<div>
<h1>{{message}}</h1>
<ul>
<li>{{item}}</li>
</ul>
<my-nav></my-nav>
</div>
</template>
<!-- 子组件向子组件传递数据的模版 -->
<template>
<div>
<h1>{{message}}</h1>
<ul>
<li>{{item}}</li>
</ul>
</div>
</template>
<script>
var vm = new Vue({
el: '#app',
data: {
temp_2_list: ["1", "2", "3"]
},
components: {
//数据在自己组件中的实例
'my-header': {
template: '#temp-1',
data: function() {
return {
list: ["1", "2", "3"],
message: "组件中的数据"
};
}
},
//父组件向子组件传递数据
'my-header-1': {
//props: ["list"],
template: '#temp-2',
data: function() {
return {
message: "父组件向子组件传递数据"
};
},
//属性的验证与默认值
props: {
list: {
type: Array,
default: ["4", "5", "6"]
}
},
//子组件的子组件
components: {
'my-nav': {
template: '#temp-3',
data: function() {
return {
message: "子组件中的子组件"
};
},
props: ["itemlist"]
}
}
}
}
});
</script>
Untergeordnete Komponente kommuniziert mit übergeordneter Komponente (EmitEvents)
nbsp;html>
<meta>
<meta>
<title>Page Title</title>
<meta>
<script></script>
<div>
<my-header-1></my-header-1>
</div>
<!-- 父组件向子组件传递数据的模版 -->
<template>
<div>
<h1>{{message}}</h1>
<ul>
<li>{{item}}</li>
</ul>
<my-nav></my-nav>
</div>
</template>
<!-- 子组件向子组件传递数据的模版 -->
<template>
<div>
<h1>{{message}}</h1>
<ul>
<li>{{item}}</li>
</ul>
</div>
</template>
<script>
//子组件向父组件传递数据，是发布订阅模式
var vm = new Vue({
el: '#app',
data: {
temp_2_list: ["1", "2", "3"]
},
components: {
//父组件向子组件传递数据
'my-header-1': {
//props: ["list"],
template: '#temp-2',
data: function() {
return {
message: "父组件向子组件传递数据"
};
},
//属性的验证与默认值
props: {
list: {
type: Array,
default: ["4", "5", "6"]
}
},
methods: {
getChildContent: function(str) {
debugger
alert(str);
}
},
//子组件的子组件
components: {
'my-nav': {
template: '#temp-3',
data: function() {
return {
message: "子组件中的子组件"
};
},
props: ["itemlist"],
methods: {
getContent: function(ev) {
// console.log(this);
// console.log(ev.target.innerHTML);
this.$emit("change-events", ev.target.innerHTML);
}
}
}
}
}
}
});
</script>
Kommunikation zwischen Vue-Nicht-Eltern-Kind-Komponenten
Leere Instanz und benutzerdefiniertes Ereignis
$emit
$on
Vuex State Management
State
Mutation
-
Commit
Verwendung leerer Instanzen und benutzerdefinierter Ereignisse (geeignet für kleine Projekte)
nbsp;html>
<meta>
<meta>
<title>Page Title</title>
<meta>
<script></script>
<style>
ul {
list-style-type: none;
}
</style>
<div>
<my-header-1></my-header-1>
<my-header-2></my-header-2>
</div>
<script>
//非父子组件通信
//1.0 使用空实例进行非父子组件通信
//定义空实例
//创建步骤是：
//1、首先定义一个空实例
//2、需要给被传递数据的A组件使用$emit绑定自定义事件，并将A组件的数据发布给B组件
//3、使用$on订阅A组件发布过来的数据，从而获取数据
var busVm = new Vue();
var vm = new Vue({
el: '#app',
components: {
//组件B
'my-header-1': {
template: `<h1>{{message}}`,
data: function() {
return {
message: "非父子组件通信"
};
},
mounted() {
//使用bind（this）修正this
busVm.$on("changeEnvents", function(param) {
this.message = param;
}.bind(this));
},
},
//组件A
'my-header-2': {
template: `<ul><li @click="getContent" v-for="item in list">{{item}}`,
data: function() {
return {
list: ["第一项", "第二项", "第三项"]
};
},
methods: {
getContent: function(ev) {
busVm.$emit("changeEnvents", ev.target.innerHTML);
}
}
}
}
});
</script>
Vuex-Statusverwaltung
Vue-Komponente Inhaltsverteilung
Einzelner
-Tag mit
nbsp;html>
<meta>
<meta>
<title>Page Title</title>
<meta>
<script></script>
<style>
ul {
list-style-type: none;
}
</style>
<div>
<my-header-1>
<h1>我是标题</h1>
</my-header-1>
<my-header-1>
<my-header-2></my-header-2>
</my-header-1>
</div>
<script>
//单插槽<slot>
var vm = new Vue({
el: '#app',
components: {
'my-header-1': {
template: `<div>我是头部:<slot>`,
},
'my-header-2': {
template: `<h1>我是标题`,
}
}
});
</script>
Mehrere
-Tags verwenden
nbsp;html>
<meta>
<meta>
<title>Page Title</title>
<meta>
<script></script>
<style>
ul {
list-style-type: none;
}
</style>
<div>
<my-header-1>
<button>←</button>
<button>→</button>
</my-header-1>
</div>
<script>
//多插槽的使用，则使用name属性来指定要插入的位置
var vm = new Vue({
el: '#app',
components: {
'my-header-1': {
template: `<div><slot name="left"> 我是头部:<slot name="right">`,
},
'my-header-2': {
template: `<h1>我是标题`,
}
}
});
</script>
Standardwert
nbsp;html>
<meta>
<meta>
<title>Page Title</title>
<meta>
<script></script>
<style>
ul {
list-style-type: none;
}
</style>
<div>
<my-header-1>
<button>←</button>
<button>→</button>
</my-header-1>
</div>
<script>
//多插槽的使用，则使用name属性来指定要插入的位置
var vm = new Vue({
el: '#app',
components: {
'my-header-1': {
template: `<div><slot name="left"> 我是头部:<slot name="right"><button slot="right">+`,
},
'my-header-2': {
template: `<h1>我是标题`,
}
}
});
</script>
Vue-Komponentenentwicklungsprozess
Grundlegendes HTML und CSS schreiben
Komponenten extrahieren
Datenübertragung
Inhaltsverteilung
Ereignisse und Methoden hinzufügen
DOM-Manipulation in Vue (mit $refs)
nbsp;html>
<meta>
<meta>
<title>Page Title</title>
<meta>
<script></script>
<div>
<my-header-1></my-header-1>
</div>
<!-- 父组件向子组件传递数据的模版,ref特性用于DOM操作，使用this.$refs.row获取添加特性的DOM元素 -->
<template>
<div>
<h1>{{message}}</h1>
<ul>
<li>{{item}}</li>
</ul>
</div>
</template>
<script>
//子组件向父组件传递数据，是发布订阅模式
var vm = new Vue({
el: '#app',
data: {
temp_2_list: ["1", "2", "3"]
},
components: {
//父组件向子组件传递数据
'my-header-1': {
//props: ["list"],
template: '#temp-2',
data: function() {
return {
message: "父组件向子组件传递数据"
};
},
//属性的验证与默认值
props: {
list: {
type: Array,
default: ["4", "5", "6"]
}
},
methods: {
updateStyle: function(ev) {
ev.target.style.color = 'red';
// this.$refs.row.style.color = 'red';
console.log(this.$refs.row);
this.$refs.row.forEach(element => {
console.log(element);
element.style.color = 'red';
});
}
}
}
}
});
</script>
Das obige ist der detaillierte Inhalt vonWas sind Vue-Komponenten? Wie verwende ich Vue-Komponenten? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Dieser Artikel ist reproduziert unter:cnblogs.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen