suchen
HeimWeb-FrontendFront-End-Fragen und AntwortenWas bedeutet Vue-Komponentenentwicklung?
Was bedeutet Vue-Komponentenentwicklung?Dec 27, 2021 pm 04:15 PM
vueKomponentenentwicklung

In Vue bezieht sich Komponentenentwicklung auf die Aufteilung komplexer Geschäfte in mehrere Komponenten. CSS, JS, Vorlagen, Bilder und andere Ressourcen, von denen jede Komponente abhängt, werden gemeinsam entwickelt und verwaltet. Da Komponenten unabhängig von Ressourcen sind, können sie innerhalb des Systems wiederverwendet werden, was die Menge an Code erheblich vereinfacht und spätere Änderungen und Wartung einfacher macht.

Was bedeutet Vue-Komponentenentwicklung?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

Vue-Komponentenentwicklung

Was ist Komponentisierung? Vue.js verfügt über zwei magische Waffen, eine ist datengesteuert und die andere ist Komponentisierung. Die Frage ist also, was Komponentisierung ist und warum Sie komponieren möchten ? Als nächstes werde ich diese beiden Fragen einzeln beantworten. Die sogenannte Komponentisierung bedeutet, die Seite in mehrere Komponenten aufzuteilen und die CSS, JS, Vorlagen, Bilder und anderen Ressourcen, von denen jede Komponente abhängt, gemeinsam zu entwickeln und zu verwalten. Da Komponenten unabhängig von Ressourcen sind, können sie innerhalb des Systems wiederverwendet werden und Komponenten können verschachtelt werden. Wenn das Projekt komplex ist, kann die Menge an Code erheblich vereinfacht werden, und es ist auch benutzerfreundlicher für spätere Änderungen und Wartung.

1. Komponentenentwicklung bezieht sich auf die Aufteilung komplexer Geschäfte nacheinander.

2 Komponenten der Komponentenentwicklung müssen im Allgemeinen flexibel sein.

3 Die Komponentenentwicklung umfasst die js-Komponentenkapselung. Sie müssen die Grundlagen von Vue beherrschen. Vue-Instanzmethoden und -eigenschaften, Vue.extend, Vue-Plug-Ins usw.

So führen Sie die Komponentenentwicklung durchWas bedeutet Vue-Komponentenentwicklung?

Schauen Sie sich zunächst das Bild unten an:

Das ist Vue. Ein Fehler in js ist auf die Verwendung einer nicht registrierten Komponente lx-xxx zurückzuführen. Dieser Fehler sagt uns die Wahrheit:

Sie müssen sich registrieren, bevor Sie eine benutzerdefinierte Komponente verwenden können

. Was bedeutet Vue-Komponentenentwicklung? Wie registriert man also eine Komponente? Vue.js bietet zwei Möglichkeiten zur Registrierung von Komponenten:

globale Registrierung

und lx-xxx ,这个报错告诉我们一个道理:使用自定义组件之前必须注册。  
那么如何注册一个组件呢? Vue.js 提供了 2 种组件的注册方式,全局注册局部注册

1. 全局注册

在 vue.js 中我们可以使用 Vue.component(tagName, options) 进行全局注册,例如

Vue.component('my-component', {
  // 选项
})

2. 局部注册

Vue.js 也同样支持局部注册,我们可以在一个组件内部使用 components 选项做组件的局部注册,例如:

import HelloWorld from './components/HelloWorld'

export default {
  components: {
    HelloWorld
  }
}

区别:全局组件是挂载在 Vue.options.components 下,而局部组件是挂载在 vm.$options.componentslokale Registrierung.

1. Globale Registrierung

In vue.js können wir Vue.component(tagName, Optionen) für die globale Registrierung verwenden, wie zum Beispiel
<lx-niu/>
<lx-niu></lx-niu/>

name: &#39;lxNiu&#39;

2 >

Vue.js unterstützt auch die lokale Registrierung. Wir können die Komponentenoption innerhalb einer Komponente verwenden, um die lokale Registrierung der Komponente durchzuführen, zum Beispiel:

<div>{{msg}}</div>

props: {
  msg: {
    type: String,
    default: &#39;&#39;
  }
}

show: Boolean // 默认false

msg: [String, Boolean]  // 多种类型
Unterschied: Globale Komponenten werden in Vue.options.components, während lokale Komponenten unter <code>vm.$options.components gemountet werden. Aus diesem Grund können global registrierte Komponenten beliebig verwendet werden.

Grundlegende Kenntnisse für die Komponentenentwicklung

Man sagt, dass man, wenn man seine Arbeit gut machen will, zuerst seine Werkzeuge schärfen muss, bevor man eine Komponente offiziell entwickelt. Ich werde nur kurz darauf eingehen Stellen Sie es hier vor. Einzelheiten finden Sie auf der offiziellen Website. Der Name der Komponente ist erforderlich.

Props

Component-Eigenschaften, die für die Kommunikation über Eltern-Kind-Komponenten verwendet werden und über dies zugänglich sind. : Da Requisiten, Daten und Berechnungen während der Kompilierungsphase als VM-Attribute zusammengeführt werden, können sie nicht in

render

Beschreiben Sie die Vorlage mit der Renderfunktion createElement, das drei Parameter akzeptiert, gibt einen vnode zurück

h Parametererklärung:

args1: {string | Function | Object} Wird verwendet, um HTML-Inhalte von DOM bereitzustellen

args2: {Object} DOM-Stile, Attribute, Bindungsereignisse usw. festlegen args3: {array } Wird zum Festlegen des Inhalts für die Verteilung verwendet. Hinweis: Vue-Kompilierungsreihenfolge -->

<div>{{newMsg}}</div>

computed: {
  newMsg() {
    return &#39;hello &#39; + this.msg
  }
},


class


Definieren Sie den Klassennamen der Unterkomponente

<lx-niu tag=&#39;button&#39;>hello world</lx-niu>

<script type="text/javascript">
  export default {
    name: &#39;lxNiu&#39;,
    props: {
      tag: {
        type: String,
        default: &#39;div&#39;
      },
    },
    // h: createElement
    render(h) {
      return h(this.tag,
        {class: &#39;demo&#39;}, 
        this.$slots.default)
    }
  }
</script>

style

Übergeben Sie den Stil an die Unterkomponente

<lx-niu>
  <div slot=&#39;header&#39;>header</div>
  <div class="body" slot=&#39;body&#39;>
    <input type="text">
  </div>
  <div slot=&#39;footer&#39;>footer</div>

  <button class=&#39;btn&#39;>button</button>
</lx-niu>

<template>
  <div>
    <slot name=&#39;header&#39;></slot>
    <slot name=&#39;body&#39;></slot>
    <slot name=&#39;footer&#39;></slot>
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name: &#39;lxNiu&#39;,
    mounted() {
      this.$slots.header // 包含了slot="foo"的内容
      this.$slots.default // 得到一个vnode,没有被包含在具名插槽中的节点,这里是button
    }
  }
</script>
Was bedeutet Vue-Komponentenentwicklung?

Andere Attribute

$ attrs

v- bind="$attrs" fügt der übergeordneten Komponente andere Attribute als Klasse und Stil hinzu, z. B. die Definition der Eingabe:

// 父组件
<lx-niu round type=&#39;big&#39;/>

// 子组件
<div :class="[
  type ? &#39;lx-niu__&#39; + type : &#39;&#39;,
  {&#39;is-round&#39;: round},
]">控制</div>

//真实DOM
<div class=&#39;lx-niu__big is-round&#39;>hello</div>
v-once

Die Komponente wird nur einmal gerendert und wird es nicht sein wird erneut gerendert, auch wenn sich die Daten später ändern. Im Beispiel wird val beispielsweise nicht zu 456

// 父组件
<lx-niu :bodyStyle=&#39;{color: "red"}&#39;/>


// 子组件
<template>
  <div :style=&#39;bodyStyle&#39;>hello world</div>
</template>

<script>
  export default {
    name: &#39;lxNiu&#39;,
    props: {
      bodyStyle: {},
    },
  }
</script>

mixins

// mixin.js
export default {
  data() {
    return{
       msg: &#39;hello world&#39;
    }
  },
  methods: {
    clickBtn() {
      console.log(this.msg)
    }
  },
}

// index.vue
<button @click="clickBtn">button</button>

import actionMixin from "./mixin.js";
export default {
  methods: {},
  mixins: [actionMixin]
}

实例演示

比如我们要注册一个 lx-button 这样一个组件,那么目录和伪代码如下:

Was bedeutet Vue-Komponentenentwicklung?

index.vue

<template>
  <button>lxButton</button>
</template>

<script>
export default {
  name: &#39;lxButton&#39;
}
</script>

index.js

import lxButton from &#39;./src/index&#39;

lxButton.install = (Vue) => {
  Vue.component(lxButton.name, lxButton)
}

export default lxButton

其中 install 是 Vue.js 提供了一个公开方法,这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象。
MyPlugin.install = function (Vue, options){}

参考: 开发插件

https://cn.vuejs.org/v2/guide/plugins.html#%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6

watch-弹窗实现原理

<button @click="dialogVisible = true">显示</button>
<lx-niu :visible.sync="dialogVisible"></lx-niu>

<script>
  export default {
    data() {
      return {
        dialogVisible: false
      }
    },
    watch: {
      dialogVisible(val) {
        console.log(&#39;father change&#39;, val)
      }
    }
  }
</script>

定义组件

<template>
  <div v-show="visible">
    <button @click="hide">关闭</button>
  </div>
</template>

<script>
  export default {
    name: &#39;lxNiu&#39;,
    props: {
      visible: Boolean
    },
    watch: {
      visible(val) {
        console.log(&#39;child change:&#39;, val)
      }
    },
    methods: {
      hide() {
        this.$emit(&#39;update:visible&#39;, false);
      }
    },
  }
</script>

点击父组件中的显示按钮,改变传入子组件中的值,点击子组件中的关闭,改变父组件中值。

注:@click=“dialogVisible = true” 点击时将dialogVisible的值改为true  
注::visible.sync: 双向数据绑定,配合update:visible使用,实现子组件修改父组件中的值

官网解释: sync

col组件实例

export default {
  name: &#39;ElCol&#39;,

  props: {
    span: {
      type: Number,
      default: 24
    },
    tag: {
      type: String,
      default: &#39;div&#39;
    },
    offset: Number,
    pull: Number,
    push: Number,
    xs: [Number, Object],
    sm: [Number, Object],
    md: [Number, Object],
    lg: [Number, Object],
    xl: [Number, Object]
  },

  computed: {
    gutter() {
      let parent = this.$parent;
      while (parent && parent.$options.componentName !== &#39;ElRow&#39;) {
        parent = parent.$parent;
      }
      return parent ? parent.gutter : 0;
    }
  },
  render(h) {
    let classList = [];
    let style = {};

    if (this.gutter) {
      style.paddingLeft = this.gutter / 2 + &#39;px&#39;;
      style.paddingRight = style.paddingLeft;
    }

    [&#39;span&#39;, &#39;offset&#39;, &#39;pull&#39;, &#39;push&#39;].forEach(prop => {
      if (this[prop] || this[prop] === 0) {
        classList.push(
          prop !== &#39;span&#39;
            ? `el-col-${prop}-${this[prop]}`
            : `el-col-${this[prop]}`
        );
      }
    });

    [&#39;xs&#39;, &#39;sm&#39;, &#39;md&#39;, &#39;lg&#39;, &#39;xl&#39;].forEach(size => {
      if (typeof this[size] === &#39;number&#39;) {
        classList.push(`el-col-${size}-${this[size]}`);
      } else if (typeof this[size] === &#39;object&#39;) {
        let props = this[size];
        Object.keys(props).forEach(prop => {
          classList.push(
            prop !== &#39;span&#39;
              ? `el-col-${size}-${prop}-${props[prop]}`
              : `el-col-${size}-${props[prop]}`
          );
        });
      }
    });

    return h(this.tag, {
      class: [&#39;el-col&#39;, classList],
      style
    }, this.$slots.default);
  }
};

col组件使用render函数,而不是template来实现组件,原因有两个:

  • 该组件有大量的类判断,如果采用template代码比较冗余,使用js代码更加简洁

  • 直接render描述性能更好

官网解释: render-function

button组件实例

<template>
  <button
    class="el-button"
    @click="handleClick"
    :disabled="buttonDisabled || loading"
    :autofocus="autofocus"
    :type="nativeType"
    :class="[
      type ? &#39;el-button--&#39; + type : &#39;&#39;,
      buttonSize ? &#39;el-button--&#39; + buttonSize : &#39;&#39;,
      {
        &#39;is-disabled&#39;: buttonDisabled,
        &#39;is-loading&#39;: loading,
        &#39;is-plain&#39;: plain,
        &#39;is-round&#39;: round,
        &#39;is-circle&#39;: circle
      }
    ]"
  >
    <i class="el-icon-loading" v-if="loading"></i>
    <i :class="icon" v-if="icon && !loading"></i>
    <span v-if="$slots.default"><slot></slot></span>
  </button>
</template>
<script>
  export default {
    name: &#39;ElButton&#39;,

    inject: {
      elForm: {
        default: &#39;&#39;
      },
      elFormItem: {
        default: &#39;&#39;
      }
    },

    props: {
      type: {
        type: String,
        default: &#39;default&#39;
      },
      size: String,
      icon: {
        type: String,
        default: &#39;&#39;
      },
      nativeType: {
        type: String,
        default: &#39;button&#39;
      },
      loading: Boolean,
      disabled: Boolean,
      plain: Boolean,
      autofocus: Boolean,
      round: Boolean,
      circle: Boolean
    },

    computed: {
      _elFormItemSize() {
        return (this.elFormItem || {}).elFormItemSize;
      },
      buttonSize() {
        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
      },
      buttonDisabled() {
        return this.disabled || (this.elForm || {}).disabled;
      }
    },

    methods: {
      handleClick(evt) {
        this.$emit(&#39;click&#39;, evt);
      }
    }
  };
</script>

局部组件实例

<template>
  <div class="login">
    <login-header />
    <login-request />
    <login-footer />
  </div>
</template>

<script>
import loginHeader from &#39;./login-header&#39;;
import loginRequest from &#39;./login-request&#39;;
import loginFooter from &#39;./login-footer&#39;;

export default {
  components: {
    [loginHeader.name]: loginHeader,
    [loginRequest.name]: loginRequest,
    [loginFooter.name]: loginFooter
  }
};
</script>

8. 分享总结

  • 首先介绍了什么是组件化开发,以及为什么要进行组件化
  • 其次介绍了组件开发的两种方式和适用场景,以及进行组件化开发的必备知识
  • 最后实例演示了全局组件和局部组件的开发

【相关推荐:《vue.js教程》】

Das obige ist der detaillierte Inhalt vonWas bedeutet Vue-Komponentenentwicklung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vue常见面试题汇总(附答案解析)Vue常见面试题汇总(附答案解析)Apr 08, 2021 pm 07:54 PM

本篇文章给大家分享一些Vue面试题(附答案解析)。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

5 款适合国内使用的 Vue 移动端 UI 组件库5 款适合国内使用的 Vue 移动端 UI 组件库May 05, 2022 pm 09:11 PM

本篇文章给大家分享5 款适合国内使用的 Vue 移动端 UI 组件库,希望对大家有所帮助!

vue中props可以传递函数吗vue中props可以传递函数吗Jun 16, 2022 am 10:39 AM

vue中props可以传递函数;vue中可以将字符串、数组、数字和对象作为props传递,props主要用于组件的传值,目的为了接收外面传过来的数据,语法为“export default {methods: {myFunction() {// ...}}};”。

手把手带你利用vue3.x绘制流程图手把手带你利用vue3.x绘制流程图Jun 08, 2022 am 11:57 AM

利用vue3.x怎么绘制流程图?下面本篇文章给大家分享基于 vue3.x 的流程图绘制方法,希望对大家有所帮助!

聊聊vue指令中的修饰符,常用事件修饰符总结聊聊vue指令中的修饰符,常用事件修饰符总结May 09, 2022 am 11:07 AM

本篇文章带大家聊聊vue指令中的修饰符,对比一下vue中的指令修饰符和dom事件中的event对象,介绍一下常用的事件修饰符,希望对大家有所帮助!

如何覆盖组件库样式?React和Vue项目的解决方法浅析如何覆盖组件库样式?React和Vue项目的解决方法浅析May 16, 2022 am 11:15 AM

如何覆盖组件库样式?下面本篇文章给大家介绍一下React和Vue项目中优雅地覆盖组件库样式的方法,希望对大家有所帮助!

通过9个Vue3 组件库,看看聊前端的流行趋势!通过9个Vue3 组件库,看看聊前端的流行趋势!May 07, 2022 am 11:31 AM

本篇文章给大家分享9个开源的 Vue3 组件库,通过它们聊聊发现的前端的流行趋势,希望对大家有所帮助!

react与vue的虚拟dom有什么区别react与vue的虚拟dom有什么区别Apr 22, 2022 am 11:11 AM

react与vue的虚拟dom没有区别;react和vue的虚拟dom都是用js对象来模拟真实DOM,用虚拟DOM的diff来最小化更新真实DOM,可以减小不必要的性能损耗,按颗粒度分为不同的类型比较同层级dom节点,进行增、删、移的操作。

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

MantisBT

MantisBT

Mantis ist ein einfach zu implementierendes webbasiertes Tool zur Fehlerverfolgung, das die Fehlerverfolgung von Produkten unterstützen soll. Es erfordert PHP, MySQL und einen Webserver. Schauen Sie sich unsere Demo- und Hosting-Services an.

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ist eine PHP/MySQL-Webanwendung, die sehr anfällig ist. Seine Hauptziele bestehen darin, Sicherheitsexperten dabei zu helfen, ihre Fähigkeiten und Tools in einem rechtlichen Umfeld zu testen, Webentwicklern dabei zu helfen, den Prozess der Sicherung von Webanwendungen besser zu verstehen, und Lehrern/Schülern dabei zu helfen, in einer Unterrichtsumgebung Webanwendungen zu lehren/lernen Sicherheit. Das Ziel von DVWA besteht darin, einige der häufigsten Web-Schwachstellen über eine einfache und unkomplizierte Benutzeroberfläche mit unterschiedlichen Schwierigkeitsgraden zu üben. Bitte beachten Sie, dass diese Software

SublimeText3 Englische Version

SublimeText3 Englische Version

Empfohlen: Win-Version, unterstützt Code-Eingabeaufforderungen!

SAP NetWeaver Server-Adapter für Eclipse

SAP NetWeaver Server-Adapter für Eclipse

Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.

Dreamweaver Mac

Dreamweaver Mac

Visuelle Webentwicklungstools