vue-3.2-组件的三种定义方式

1. 什么是组件：组件的出现，就是为了拆分Vue实例的代码量，能够让我们以不同的组件，来划分不同的功能模块，将来需要什么样的功能，就去调用对应的组件即可；

2. 模块化：是从代码的角度进行划分的；方便代码分层开发，保证每个模块的职能单一；

3. 组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用！

定义组件的三种方式：

　　第一种：

<body>
<div id="app">
    <!--如果使用组件，直接把组件的名称，以HTML标签的形式，引入到页面中，即可-->
    <mycom1></mycom1>
</div>
<script>
    // 1.1 使用 Vue.extend 来创建全局的 Vue 组件
    var com1 = Vue.extend({
        template:'<h3>这是使用 Vue.extend 创建的组件</h3>' // 通过 template 属性，指定了组件要展示的HTML结构
    })

    // 1.2 使用 Vue.component('组件的名称'，创建出来的组件模板对象)
    // Vue.component('myCom1', com1)
    // 如果使用 Vue.component 定义全局组件的时候，组件名称使用了 驼峰命名，则在引用组件的时候，需要把 大写的驼峰改为小写的字母，同时，两个单词之间，使用 - 链接；
    // 如果不适用驼峰，则直接拿名称来使用即可；
    Vue.component('mycom1', com1)
    var vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
        }
    })
</script>
</body>

　　第二种：

<body>
<div id="app">
    <mycom2></mycom2>
</div>
<script>
    /*注意：不论是那种方式创建出来的组件，组件的template 属性指向的模板内容，必须有且只能有唯一的一个根元素*/
    Vue.component('mycom2', {
        template:'<div><h3>这是直接使用 Vue.component 创建的组件</h3><span>span元素</span></div>' // 通过 template 属性，指定了组件要展示的HTML结构
    })
    var vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
        }
    })
</script>
</body>

　　第三种：

<body>
<div id="app">
    <mycom3></mycom3>
</div>
<div id="app2">
    <mycom3></mycom3>
    <login></login>
</div>
<template id="tmpl">
    <div>
        <h1>这是通过 template 元素，在外部定义的组件结构，这个方式，有代码的智能提示和高亮</h1>
        <h4>vue-template</h4>
    </div>
</template>
<template id="tmpl2">
    <h1>这是私有的login组件</h1>
</template>
<script>
    /*注意：不论是那种方式创建出来的组件，组件的template 属性指向的模板内容，必须有且只能有唯一的一个根元素*/
    Vue.component('mycom3', {
        template:'#tmpl'
    })
    var vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
        }
    })

    var vm2 = new Vue({
        el:'#app2',
        data:{},
        methods:{},
        filters:{},
        components:{ // 定义实例内部私有组件
            login:{
                template:'#tmpl2'
            }
        }

    })
</script>
</body>

 

posted @ 2019-08-11 17:00  白玉神驹  阅读(3793)  评论(0)    收藏  举报