suchen

Heim  >  Artikel  >  Web-Frontend  >  Eine kurze Analyse verschiedener Möglichkeiten zum Erstellen von Komponenten in Vue

Eine kurze Analyse verschiedener Möglichkeiten zum Erstellen von Komponenten in Vue

醉折花枝作酒筹
醉折花枝作酒筹Original
2021-03-31 11:09:402536Durchsuche

Das Erstellen von Vue-Komponenten besteht darin, die Codemenge von Vue-Instanzen aufzuteilen und verschiedene Funktionen über verschiedene Komponenten zu finden. Hier sind drei Möglichkeiten, Komponenten in Vue zu erstellen. Freunde in Not können darauf verweisen. Eine kurze Analyse verschiedener Möglichkeiten zum Erstellen von Komponenten in Vue

Methode 1: Verwenden Sie Vue.extend, um eine globale Vue-Komponente zu erstellen.

Instanz: 

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

Verwenden Sie Vue.component('组件名称', 创建的组件对象)来创建vue组件的时候，名称使用首字母大写来命名，引用组件时，将大写的改为小写字母，两个单词之前使用 - 连接；参数一：一个标签形式来引入组件的，参数二：template就是组件展示的HTMLInhalt. 

<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>

Das erhaltene Ergebnis ist:

Eine kurze Analyse verschiedener Möglichkeiten zum Erstellen von Komponenten in Vue

Methode 2: Vue.component direkt verwenden 

<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>

Das Ergebnis:

Eine kurze Analyse verschiedener Möglichkeiten zum Erstellen von Komponenten in Vue

Methode 3: Vue.component außerhalb der kontrollierten #App verwenden die Vorlagenelement

Außerhalb der kontrollierten #App verwenden Sie das Vorlagenelement, um die HTML-Vorlagenstruktur der Komponente zu definieren

<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>

Ausgabeergebnis:

Eine kurze Analyse verschiedener Möglichkeiten zum Erstellen von Komponenten in Vue

Hinweis: Egal, wie die Komponente erstellt wird, die Komponente Der Inhalt, auf den die Vorlage verweist, hat ein und nur ein Stammelement.

Verwandte Empfehlungen: „vue.js Tutorial“

Das obige ist der detaillierte Inhalt vonEine kurze Analyse verschiedener Möglichkeiten zum Erstellen von Komponenten in Vue. 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
Vorheriger Artikel：Was sind die neuen Funktionen von vue3.0?Nächster Artikel：Was sind die neuen Funktionen von vue3.0?

In Verbindung stehende Artikel

Mehr sehen