Une brève analyse de plusieurs façons de créer des composants dans Vue-Voir.js-php.cn

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

醉折花枝作酒筹

Libérer： 2021-03-31 13:54:50

original

2585 Les gens l'ont consulté

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结构
     })

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

Résultat de sortie :

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