vue组件的挂载方式

最新推荐文章于 2024-03-28 18:57:36 发布

蛋打鸡飞条

最新推荐文章于 2024-03-28 18:57:36 发布

阅读量3.3k

点赞数 1

分类专栏：前台

本文链接：https://blog.csdn.net/qq_33709529/article/details/107973472

版权

前台专栏收录该内容

7 篇文章 0 订阅

订阅专栏

vue2.0中组件之间有全局注册的组件，有组件内部注册的组件。这两种组件都可以挂载到任何一个组件上，比如有根组件如下

import Vue from 'vue'

Vue.component('global-component', {


    template: '<h2>I\'m a global component </h2>'
})
new Vue({
    el: "#app",
    components: {
        "layout": layout
    }
})

上面

上面是我们要实现的流程图

1.根组件挂载全局组件和普通组件

上面注册了一个全局组件，global-component并且初始化了一个vue实例。那么如何在根组件引用global-component?

（1）.挂载全局组件。很简单把global-component放在index.html文件中

<!DOCTYPE html>
<html>


<head>
    <meta charset="utf-8">
    <title>vue1</title>
</head>


<body>
    <div id="app">
     
        <global-component> </global-component>


    </div>



</body>


</html>

(2).挂载普通组件layout，vue实例加入components属性，并且定义组件layout配置项

let layout = {
    template: '<div>我是内部挂载的组件</div>',
  
}
new Vue({
    el: "#app",
//add new attributes
    components: {
        "layout": layout
    }


})

然后修改index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>vue1</title>
</head>

<body>
    <div id="app">
        <layout></layout>
        <global-component> </global-component>

    </div>


</body>

</html>

2.普通组件挂载全局组件与普通组件
例如，给刚才的layout上挂载一个普通组件child以及全局组件global-component.挂载普通组件，在内部components中注册组件child然后在模板template中引用<child></child>；挂载全局组件直接模板template引用就可以

let layout = {
    template: '<div>我是内部挂载的组件<global-component></global-component><child></child></div>',
    components: {
        'child': {
            template: '<span>我是一个普通组件内部的组件</span>'
        }
    }
}

这样，我们就实现了组件之间的层级嵌套关系。
完整js代码示例如下

import Vue from 'vue'
let layout = {
    template: '<div>我是内部挂载的组件<global-component></global-component><child></child></div>',
    components: {
        'child': {
            template: '<span>我是一个普通组件内部的组件</span>'
        }
    }
}
Vue.component('global-component', {

    template: '<h2>I\'m a global component </h2>'
})
new Vue({
    el: "#app",
    components: {
        "layout": layout
    }

})

蛋打鸡飞条

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
vue组件的挂载方式

vue2.0中组件之间有全局注册的组件，有组件内部注册的组件。这两种组件都可以挂载到任何一个组件上，比如有根组件如下import Vue from 'vue'Vue.component('global-component', { template: '<h2>I\'m a global component </h2>'})new Vue({ el: "#app", components: { "layout": layou.
复制链接

扫一扫

专栏目录