communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Comment utiliser les composants Vue.js

Comment utiliser les composants Vue.js

php中世界最好的语言
Libérer： 2018-05-11 11:37:04
original
2486 Les gens l'ont consulté

Cette fois, je vais vous présenter la méthode d'utilisation des composants Vue.js , et quelles sont les précautions lors de l'utilisation des composants Vue.js. Voici des cas pratiques, prenons un. regarder.

1. Tous les composants Vue sont également des instances Vue, divisées en composants globaux et composants locaux. La méthode d'enregistrement est la suivante. 

<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>
Copier après la connexion

Remarque :

a. Il existe des restrictions sur les éléments parent-enfant tels que