Explication détaillée de l'enregistrement des composants Vue 2.0-js tutoriel-php.cn

Explication détaillée de l'enregistrement des composants Vue 2.0

php中世界最好的语言

Libérer： 2018-03-10 13:50:23

original

1734 Les gens l'ont consulté

Cette fois, je vous apporte une explication détaillée de l'enregistrement des composants Vue 2.0. Quelles sont les précautions pour l'enregistrement des composants Vue 2.0. Voici des cas pratiques, jetons un coup d'oeil.

//Inscription globale :

Vue.component("my-component",{template:&#39;<div>A custom component!</div>&#39;});
/*交换位置会报错----创建组件必须在根实例化之前*/

Copier après la connexion

//Créer une instance racine :

new Vue({
 el:"#app"
 })

Copier après la connexion

---------

//Inscription locale :

new Vue({
el: "#app1",
components: {
// <my-zujian> 将只在父组件模板中可用
&#39;my-zujian&#39;: {
template: &#39;<div>我是局部组件</div>&#39;
}
}
});

Copier après la connexion

//html :

<html>
<head>
    <meta charset="UTF-8" />
    <title>vue2.0组件:</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div>全局组件也必须应用在实例上,不然不显示;</div>
    <hr>
    <div id="app">
        <my-component></my-component>
    </div>
    <div id="app1">
        <my-zujian></my-zujian>
        <my-component></my-component>
    </div>
</body>
</html>

Copier après la connexion

Résumé : L'inscription globale peut être utilisée n'importe où (bien sûr, elle doit être dans la juridiction de vue) ; Il ne peut être utilisé que lors du montage de l'élément actuel

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez faire attention au site Web php chinois et autres <.> articles connexes !

Lecture connexe :

Explication détaillée pour les débutants qui apprennent la vue

Comment résoudre le piratage CSS d'IE11

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!