Introduction détaillée au fichier unique dans vue (exemple de code)

Cet article vous apporte une introduction détaillée (exemple de code) sur les fichiers uniques dans Vue. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Les développeurs front-end qui utilisent Vue comme pile technologique de développement coopèrent souvent avec des outils de construction front-end pour effectuer la gestion technique du projet. Par exemple, la solution couramment utilisée de vue family bucket + webpack est utilisée pour développer certains projets frontaux de moyenne et grande taille. Avec webpack, les avantages de la composantisation de Vue sont plus évidents.Nous pouvons créer des pages frontales dans la pratique professionnelle grâce au développement de composants à fichier unique, améliorant ainsi l'efficacité du développement. Il y a une telle question : "Quand nous écrivons un seul fichier vue, qu'écrivons-nous ?" Beaucoup de gens peuvent répondre de cette façon : le modèle est responsable des modèles, javascript est responsable de la logique et le style est responsable. pour le style. Lorsque la réponse atteint ce point, la vision du monde d'un développeur Vue est fondamentalement très claire. Tout ce que nous avons à faire est d'écrire le modèle, le javascript et le style dans un seul composant de fichier. Si nous nous limitons à cela, il est évident que nous ne pouvons pas servir l'ensemble de notre processus de développement par une meilleure utilisation des composants mono-fichiers. Ensuite, je discuterai avec vous de quelques problèmes méthodologiques liés au développement de fichiers uniques.

L'essence de vue single file

vue single file est un fichier nommé avec une extension de fichier spécifique .vue. Le code affiché ci-dessous :

ListDemo.vue

<template>
    <div class="list-demo">
        <ul>
            <li v-for="item in list" :key="item.key">{{item.value}}</li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'ListNav',
    data() {
        return {
            list: [
                { key: 'home', value: '首页' },
                { key: 'category', value: '文章分类' },
                { key: 'tags', value: '标签' },
                { key: 'about', value: '关于我' },
                { key: 'links', value: '友情链接'},
            ],
        };
    },
};
</script>

<style>
.list-demo {
    font-size: 14px;
}
</style>

Le code contient un modèle, un script et un style. Les fonctions des trois ne seront pas décrites en détail ici. La structure ci-dessus montre la structure de fichier de base d'un fichier unique vue. L'idée derrière cela est qu'un seul composant de fichier correspond à un composant fonctionnel, et que le modèle, le style et la logique métier du composant sont tous conservés à proximité. Du point de vue de la réutilisabilité des composants et de leur maintenabilité ultérieure, ce concept a considérablement amélioré l'efficacité du développement des composants. Le fichier unique de vue n'est ni un fichier js, html ou css. La manière dont un tel fichier est appliqué à la page est une question qui sera abordée ci-dessous. Comment le fichier unique de vue est-il traité dans la page ?

Le processus de traitement d'un seul fichier vue

Un seul fichier vue est utilisé avec l'outil de construction webpack et sera traité par vue-loader dans webpack. Comme indiqué ci-dessous :

{
    test: /\.vue$/,
    loader: 'vue-loader',
}

Les fichiers uniques Vue introduits via l'importation ou requis dans le projet seront traités par vue-loader Dans ce processus, vue-loader analysera et analysera le modèle en fonction du modèle et du script. et le style. Les résultats du traitement sont renvoyés et les trois types de fichiers différents sont transmis au chargeur suivant pour traitement. Si le composant monofichier est déclaré dans les composants du composant parent, l'élément correspondant dans les composants sera inséré dans le code du script analysé. Ce processus commence à partir du fichier d'entrée main.js, et tous les composants de fichier unique dépendants impliqués subissent ce processus à leur tour. Après cela, tous les composants seront instanciés en fonction des dépendances dans la logique métier. Ce processus est également une méthode que nous utilisons souvent en développement. (Vous pouvez consulter un article séparé ici pour décrire le processus de traitement de vue-loader en détail)

Postures courantes pour les fichiers uniques

Références de composants dans les modèles

1. Utilisation

Découpage et imbrication des composants :

• Diviser une activité spécifique en composants plus petits en fonction des fonctions et des considérations de réutilisation ultérieures

• Intégrer de petits composants fonctionnels (sous-composants) via un composant conteneur (composant parent)

Comment fonctionner : Introduire les sous-composants dans les composants parents, les composants dans les composants Enregistrez et ajoutez le composant correspondant modèle de référence

dans le modèle.Cette méthode est également une méthode courante que nous utilisons dans le développement d'un seul fichier. L'instanciation de tous les composants est implicite dans la relation imbriquée des composants et de la logique métier. Les développeurs doivent uniquement se soucier de l'introduction du composant, enregistrer le composant dans la logique du composant parent et introduire le composant en tant que balise dans le modèle du composant parent. Le timing d'instanciation des composants à introduire dans ce processus peut également être contrôlé dans la logique métier via la directive v-if.

2. Scénarios applicables

Dans la plupart des scénarios, nous pouvons effectuer le développement de composants de cette manière. Ce modèle a une particularité : l'introduction des composants se fait par l'enregistrement des composants et l'écriture des balises de composants correspondantes dans le modèle. L'introduction des composants via des balises dans le modèle est essentielle Cette fonctionnalité peut apporter une certaine quantité de travail répétitif aux développeurs dans certains scénarios commerciaux.

Appels de style API

Les appels de style API font référence à la création manuelle d'instances de sous-composants. Il n'est pas nécessaire d'introduire des composants et des espaces réservés de balises de modèle dans la logique métier. API. Instanciation et affichage.

1. Utilisation

• Le module fonction fournit une entrée js pour contrôler toute la logique fonctionnelle de l'instance du fichier de commande du module fonction

• Lors de l'utilisation de ce module fonction dans d'autres composants, appelez le js sous le module fonction et transmettez certains paramètres

Méthode de fonctionnement :

Confirm.vue

<template>
    <el-dialg
        title="test"
        :visible.sync="visible">
        {{content}}
        <el-button @click="handleCancelClick">cancel</el-button>
        <el-button @click="handleOkClick">ok</el-button>
    </el-dialg>
</template>

<script>
export default {
    name: 'Confirm',
    data() {
        return {
            visible: false,
            content: '这是一个confirm dialog',
            callback: null,
        };
    },
    methods: {
        handleCancelClick() {
            this.callback('cancel');
        },
        handleOkClick() {
            this.callback('confirm');
        },
    },
};
</script>

confirm.js

import Vue from 'vue';
import Confirm from './confirm';

const ConfirmConstructor = Vue.extend(Confirm);

const confirm = (content) => {
    let confirmInstance = new ConfirmConstructor({
        data: {
            content,
        },
    });
    confirmInstance.vm = confirmInstance.$mount();
    confirmInstance.vm.visible = true;
    // 手动插入目的 dom
    document.body.appendChild(confirmInstance.vm.$el);
    confirmInstance.vm.callback = action => {
        return new Promise((resolve, reject) => {
          resolve(action);
        });
    };
    return confirmInstance.vm;
};

如上所示，给出的是一个确认弹框的场景实现。确认弹框在很多用户交互中是一个必须的交互形式。很多组件库也采用上面这种 API 式的组件调用。调用方仅仅通过 api 的调用，就能实现该功能模块的引用。这样就避免了在 template 中通过标签占位的方式引用。实现原理就是手动接管单文件组件的实例化，通过 Vue.extend 获得该组件对应的 Vue 的子类，在暴露给调用的 api 中去实例化这个组件。这个过程中我们可能还要完成一些组件数据的注入，逻辑相关以及手动将该组件插入到目的 dom 中。手动的注入 dom 是该种方式的一个很大特点，通过在 api 中动态的注入目的 dom，避免我们在各个业务组件中调用该功能模块时重复性的在业务组件 template 中手写组件标签。

二、适用场景

• 功能聚合度高，组件内逻辑简单，输入输出较为单一，比如一些功能较为独立的弹框

• 一些特殊的自定义指令开发，比如在一些特殊场景的指令，可以复用一些单文件组件，通过在指令的钩子中实例化组件对应的 vue 子类，按照特定的逻辑插入到目的 dom 中（例如：element-ui的v-loading）

区别和共性

共性：通过实例化对应组件完成组件的功能逻辑

区别：实例化的时机和方式不同。模板式的引入通过组件注册和标签引入的方式来使用单文件组件。标签引入解决了子组件插入的 dom 位置问题，开发者无需关心。API 式的单文件组件使用，在 API 调用时手动实例化组件，需要手动控制插入到目的 dom。

总结

vue 的单文件组件提供了 vue 的组件化开发思路，其本质在导出 vue 的一些关键属性，比如生命周期函数，methods，computed， watch，props等。我们可以通过上述两种方式来使用单文件组件，目的在于工程内部尽量减少重复的模板代码，组件解耦。

相关推荐：

webpack入坑之旅（五）加载vue单文件组件_html/css_WEB-ITnose

jquery加载单文件vue组件方法分享

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!