vue.js学习之组件(1)-CSDN博客

本文链接：https://blog.csdn.net/m0_47004874/article/details/114768990

组件化开发思想

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

组件化和模块化的不同

模块化:是从代码逻辑的角度划分的,方便代码分层开发,保证每个功能模块的职能单一.

组件化:是从ui 界面的角度划分,方便ui 组件的重用.

定义组件三种方式

1.使用vue.extend来创建全局组件

 <div id="app">
        <!-- 如果要使用组件,直接把组件的名称,以html标签的形式,引入到页面中 即可 -->
        <mycom1></mycom1>
    </div>



    <script src="../js/vue.js"></script>
    <script>
        // // 使用vue.extend 来创建全局的vue组件
        // var com1 = Vue.extend({  //component 组件的意思 com1为缩写
        //     template: '<h3>这是使用vue.extend 创建的组件</h3>' //通过template 属性,指定了组件要展示的html结构
        // })
        // //使用 vue.component('组件的名称',创建出来的组件模板对象)
        // // 如果使用vue.component 定义全局组件的时候,组件名称使用了 驼峰命名 则在引用的时候 
        // //需要将大写的驼峰改为小写,同时,两个单词之间用-连接

        // //如果不使用驼峰 ,则直接拿名称来使用即可
        // Vue.component('mycom1', com1)

        // 简写方法
        //　vue.component 第一个参数:组件的名称 ,将来在引用组件的时候,就是以一个标签形式来引入的
        // 第二个参数: vue.extend 创建组件,其中template 就是组件将来要展示的html内容　　　　　　　　　　
        Vue.component('mycom1', Vue.extend({
            template: '<h3>这是使用vue.extend 创建的组件</h3>'
        }))


        //创建实例
        var app = new Vue({
            el: "#app",
            data: {

            }
        })
    </script>

2.第二种方法可以说是第一种方法的简写版

<div id="app">
        <!-- 还是使用 标签形式,引入自己的组件 -->
        <mycom2></mycom2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        Vue.component('mycom2', {
            //注意:不论是那种方式创建出来的组件, 组件的template 属性指向的模板内容,必须只有唯一的一个根元素
            template: '<div><h3>这是直接使用vue.component创建的组件</h3><span>123</span></div>'
        })
        var app = new Vue({
            el: '#app',
            data: {}
        })
    </script>

3.通过 template 元素,在外部定义的组件结构这个方式有代码的智能提示和高亮

<div id="app">
        <mycom3></mycom3>
    </div>
    <!-- 在被控制的#app 外面 使用 template 元素 ,定义组件的html模板结构 -->
    <template id="temp1">
        <div>
            <h1>这是通过 template 元素,在外部定义的组件结构 这个方式有代码的智能提示和高亮</h1>
        </div>
    </template>
    <script src="../js/vue.js"></script>
    <script>
        Vue.component('mycom3', {
            template: '#temp1'
        })
        var app = new Vue({
            el: "#app",
            data: {
            }
        })
    </script>

以上是三种定义全局组件的方法

组件注册的注意事项

data必须是一个函数

分析函数与普通对象的对比
组件模板内容必须是单个根元素

分析演示实际的效果
组件模板内容可以是模板字符串

模板字符串需要浏览器提供支持（ ES6 语法）
组件命名方式短横线方式

自定义私有组件

 <div id="app">
        <!-- 在app这使用会报错 -->
        <!-- <login></login> -->
    </div>
    <div id="app2">
        <login></login>
    </div>
    <template id="tmpl2">

        <h1>这是私有的login 组件</h1>

    </template>
    <script src="../js/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {}
        });
        var app1 = new Vue({
            el: "#app2",
            components: {  //components:定义实例内部私有的组件
                login: {
                    // template: '<h1>这是私有的login 组件</h1>'
                    template: '#tmpl2' //可以使用第三种创建组件的方法
                }
            }
        })
    </script>