So schreiben Sie eine benutzerdefinierte Komponente mit Vue

Dieses Mal zeige ich Ihnen, wie Sie eine benutzerdefinierte definierte Komponente mit Vue schreiben. Was sind die Vorsichtsmaßnahmen zum Schreiben einer benutzerdefinierten Komponente mit Vue? Lasst uns gemeinsam einen Blick darauf werfen.

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 mit Webpack ein Vue-Projekt erstellen, 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 ausgebaut 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>

Einführung

Wie verweise ich auf diese Komponente in anderen Komponenten?

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 Schritte zur Verwendung von scss in Angular-Projekten

Wie man vue2.0 verwendet +koa2+mongodb zur Implementierung Registrieren und anmelden

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