vue组件的挂载方式

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

蛋打鸡飞条

3331人浏览 · 2020-08-13 10:12:56

蛋打鸡飞条 · 2020-08-13 10:12:56 发布

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
    }

})

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^