Home >Web Front-end >JS Tutorial >Detailed explanation of Vue 2.0 component registration

Detailed explanation of Vue 2.0 component registration

php中世界最好的语言Original: 2018-03-10 13:50:231746browse

This time I will bring you a detailed explanation of Vue's 2.0 component registration. What are the precautions for Vue's 2.0 component registration? The following is a practical case, let's take a look.

//Global registration:

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

//Create root instance:

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

---------

//Local registration :

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

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

Summary: Global registration can be used anywhere (of course it must be within the jurisdiction of vue); Local registration is only under the current mounted element. You can use

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to the php Chinese website and other related articles!

Detailed explanation of Vue 2.0 component registration

Related articles