简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > js-Tutorial > Hauptteil

So verwenden Sie Vue.js-Komponenten

php中世界最好的语言
Freigeben： 2018-05-11 11:37:04
Original
2446 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Methode zur Verwendung von Vue.js -Komponenten vorstellen und welche Vorsichtsmaßnahmen bei der Verwendung von Vue.js-Komponenten gelten. Hier sind praktische Beispiele sehen.

1. Alle Vue-Komponenten sind auch Vue-Instanzen, unterteilt in globale Komponenten und lokale Komponenten. Die Registrierungsmethode ist wie folgt. 

<p id="app">
    <my-component></my-component>
    <child-component></child-component></p><p id="example">
    <my-component></my-component>
    <!--在#app内局部注册的组件在此无法被渲染 -->
    <child-component></child-component></p><script src="https://cdn.jsdelivr.net/npm/vue"></script><script>Vue.component('my-component', { //全局组件，建议使用短横线分隔式命名组件  template: '<p>A custom component!</p>'})var Child = {
    template: '<p>A child component!</p>'}var app = new Vue({
    el: '#app',    
    components: { //局部组件，仅可在父作用域#app中使用
    'child-component':Child
    }　　
})var example = new Vue({
    el:'#example'})</script>
Nach dem Login kopieren

Hinweis:

Es gibt Einschränkungen für Eltern-Kind-Elemente wie

    , , Elemente können Komponentenvorlagen nicht direkt verwenden und können durch das Attribut is angegeben werden, z. B. . Es gibt keine derartigen Einschränkungen, wenn Sie eine ZeichenfolgeVorlage (ein Zeichenfolgenliteral, das eingebettete Ausdrücke zulässt) aus einer der folgenden Quellen verwenden:

    1)

    Beliebte Tutorials
    Mehr>
    Verwandte Tutorials
    Beliebte Empfehlungen
    Aktuelle Kurse
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage
    Über uns Haftungsausschluss Sitemap
    Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！