Maison > interface Web > js tutoriel > le corps du texte

Comment utiliser les composants Vue.js

php中世界最好的语言
Libérer: 2018-05-11 11:37:04
original
2446 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

    , Les éléments ne peuvent pas utiliser directement les modèles de composants et peuvent être spécifiés par l'attribut is, tel que . Il n'y a pas de telles restrictions si vous utilisez une chaînemodèle (une chaîne littérale qui autorise les expressions intégrées) provenant de l'une des sources suivantes :

    1)

    Tutoriels populaires
    Plus>
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal
    À propos de nous Clause de non-responsabilité Sitemap
    Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!