Maison > Article > interface Web > Une brève analyse de plusieurs façons de créer des composants dans Vue

Une brève analyse de plusieurs façons de créer des composants dans Vue

醉折花枝作酒筹original: 2021-03-31 11:09:402461parcourir

Créer des composants vue consiste à diviser le volume de code des instances de vue et à trouver différentes fonctions via différents composants. Voici trois façons de créer des composants dans Vue. Les amis dans le besoin peuvent s'y référer. J'espère que cela sera utile à tout le monde. Une brève analyse de plusieurs façons de créer des composants dans Vue

Méthode 1 : Utilisez Vue.extend pour créer un composant Vue global

Instance :

var com1 = Vue.extend({
    template: &#39;<h3>这是使用 Vue.extend 创建的组件</h3>&#39; // 通过 template 属性，指定了组件要展示的HTML结构
     })

Utilisez Vue.component ('nom du composant', objet composant créé) Lors de la création d'un composant vue, utilisez la première lettre du nom pour le nommer. Lors du référencement du composant, remplacez les majuscules par des lettres minuscules. Utilisez - pour relier les deux paramètres ; Un : Une balise est utilisée pour introduire le composant. Paramètre deux : template est le contenu HTML affiché par le composant.

<div id="app">
    <!-- 如果要使用组件，直接，把组件的名称，以 HTML 标签的形式，引入到页面中，即可 -->
    <mycom1></mycom1>
  </div>

  <script>
Vue.component(&#39;mycom1&#39;, Vue.extend({
      template: &#39;<h3>这是使用 Vue.extend 创建的组件</h3>&#39;
    }))
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: &#39;#app&#39;,
      data: {},
    });
  </script>

Le résultat obtenu est :

Une brève analyse de plusieurs façons de créer des composants dans Vue

Méthode 2 : Utiliser directement Vue.component

<body>
  <div id="app">
    <!-- 使用标签形式,引入自己的组件 -->
    <mycom2></mycom2>
  </div>

  <script>
    Vue.component(&#39;mycom2&#39;, {
      template:`<div>
                  <h3>这是直接使用 Vue.component 创建出来的组件</h3>
                  <span>123</span>
               </div> `
    })
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: &#39;#app&#39;,
      data: {},
      methods: {}
    });
  </script>
</body>

Résultat :

Une brève analyse de plusieurs façons de créer des composants dans Vue

Méthode 3 : utilisez Vue.component en dehors de l'#application contrôlée et utilisez l'élément de modèle

à l'intérieur du # extérieur contrôlé app, utilisez l'élément template pour définir la structure du modèle HTML du composant

<body>
  <div id="app2">
     <login></login>
    <mycom3></mycom3>
    <login></login>
  </div>
  <template id="tmpl">
    <div>
      <h1>这是通过 template 元素,在外部定义的组件结构,这个方式,有代码的只能提示和高亮</h1>
      <h4>好用,不错!</h4>
    </div>
  </template>
  <template id="tmpl2">
    <h1>这是私有的 login 组件</h1>
  </template>
  <script>
    Vue.component(&#39;mycom3&#39;, {
      template: &#39;#tmpl&#39;,
    })
    // 创建 Vue 实例，得到 ViewModel
    var vm2 = new Vue({
      el: &#39;#app2&#39;,
      data: {},
      methods: {},
      filters: {},
      directives: {},
      components: { // 定义实例内部私有组件的
        login: {
          template: &#39;#tmpl2&#39;
        }
      },
    })
  </script>
</body>

Résultat de sortie :

Une brève analyse de plusieurs façons de créer des composants dans Vue

Remarque : Quelle que soit la manière dont le composant est créé, le contenu pointé par le modèle du composant possède un et un seul élément racine.

Recommandations associées : "Tutoriel vue.js"

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Quelles sont les nouvelles fonctionnalités de vue3.0Article suivant：Quelles sont les nouvelles fonctionnalités de vue3.0

Articles Liés

Voir plus