Benutzerdefinierte vue-Komponente

Dieses Mal bringe ich Ihnen benutzerdefinierte Vue-Komponenten. Was sind die Vorsichtsmaßnahmen für benutzerdefinierte Vue-Komponenten? Hier sind praktische Fälle.

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>

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:

So verwenden Sie scss in Angular-Projekten

Was sind die Verpackungsoptimierungsmethoden für Vue

Das obige ist der detaillierte Inhalt vonBenutzerdefinierte vue-Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!