So schreiben Sie Komponenten in Vue

Dieses Mal zeige ich Ihnen, wie Sie Komponenten in Vue schreiben und welche Vorsichtsmaßnahmen beim Schreiben von Komponenten in Vue gelten. Hier ist ein praktischer Fall, werfen wir einen Blick darauf.

Schreiben Sie eine Vue-Komponente

Was ich unten schreibe, ist, wie man eine einzelne Dateikomponente mit der Endung .vue schreibt, bei der es sich um ein erstelltes Projekt handelt Basierend auf Webpack. Wenn Sie immer noch nicht wissen, wie Sie Webpack zum Erstellen eines Vue-Projekts verwenden, können Sie zu vue-cli wechseln.

Eine vollständige Vue-Komponente umfasst die folgenden drei Teile:

1. Vorlage: Vorlage

2. js: Logik

3. CSS: Stil

Jede Komponente hat ihre eigene Vorlage, JS und Stil. Wenn eine Seite mit einem Haus verglichen wird, sind die Bestandteile das Wohnzimmer, das Schlafzimmer, die Küche und die Toilette im Haus. Wenn die Küche separat herausgenommen wird, können die Komponenten Messer, Dunstabzugshauben usw. sein. Das heißt, Seiten bestehen aus Komponenten, und Komponenten können auch aus Komponenten bestehen. Dadurch ist es sehr flexibel und weist eine sehr geringe Kopplung auf.

Sehen wir uns zunächst an, wie eine Komponente in eine .vue-Datei geschrieben wird:

Vue.component('simple-counter', {
 template: '<p id="inputBox"><input type="text"></p>',
 data () {   // 数据
 return {
  counter: 0
 }
 },
 methods: {
 // 写点方法
 },
 created () {
 // 生命钩子
 },
 computed: {
 // 计算属性
 }
})

Wofür wird eine Vorlage verwendet?

<template>
 <p id="inputBox">
 <input type="text">
 </p>
</template>
<!--
template就是这个组件的html，也就是下面部分（vue-loader会将template标签下的内容解析出来）：
-->
<p id="inputBox">
 <input type="text">
</p>
<!--
 对应原生写法的话，就是template内的dom字符串
-->

js-Teil

export default {
 data () {
 return {
  counter: 0
 }
 },
 methods: {
 // 方法
 },
 created () {
 // 生命钩子
 },
 computed: {
 // 计算属性
 }
}
// 在这里很明显js部分就是对应的原生写法内的非template部分了。
// export default这个是es6的模块写法，不懂的可以先去了解es6的模块化

css-Teil

<style lang="scss" scoped>
...样式
</style>

Wir stellen vor:

Wie kann diese Komponente in anderen Komponenten referenziert werden?

Komponente eins (button.vue)

<template>
 <p class="button">
 <button @click="onClick">{{text}}</button>
 </p>
</template>
<script>
export default {
 props: ['text'],   // 获取父组件的传值
 data () {
 return {
 }
 },
 methods: {
 onClick () {
  console.log('点击了子组件')
 }
 }
}
</script>
<style lang="scss" scoped>
.button {
 button {
 width: 100px;
 }
}
</style>

Komponente zwei (box.vue)

<template>
 <p class="box">
 <v-button :text="text"></v-button>    <!--使用组件并传值（text）-->
 </p>
</template>
<script>
import Button from './button.vue'  // 引入子组件
export default {
 components: {
 'v-button': Button
 },
 data () {
 return {
  text: '按键的name'
 }
 },
 methods: {
 }
}
</script>

Ich glaube, du hast gelesen In diesem Artikel beherrschen Sie die Fallmethode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung von Webpack Hot Refresh und Hot Loading

Detaillierte Erläuterung der Codeaufteilung Optimierung der Vue-Verpackungsschritte

Das obige ist der detaillierte Inhalt vonSo schreiben Sie Komponenten in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!