组件 - vue组件 - 《vue》

1, 什么是组件?
2, 如何创建组件?
3, 如何使用组件?
4, 为什么要使用组件?
vue组件模板

1, 什么是组件?

组件是一个vue项目的基本组成部分 , 组件分为三种:  根组件, 全局组件, 局部组件<br />    一个vue项目至少要有一个组件,就是根组件,  其他组件可根据需求创建, <br />    例如: 轮播图组件,导航条组件,星级评分组件 等

2, 如何创建组件?

根组件: 使用 new Vue()创建的vue对象就是根组件, 必不可少<br />    全局组件: 在全局作用域使用Vue.component()定义的组件, 在全局范围内都可用<br />    局部组件: 在组件的components字段中定义的组件, 只能在他所在的组件中使用

3, 如何使用组件?

组件在定义后会有一个组件名, 把组件名当做标签名使用即可<br />    组件名定义时可以用小驼峰, 使用时必须用小写

4, 为什么要使用组件?

往往一个项目中数据和功能比较多而且复杂, 如果都写在根组件中会显得臃肿,杂乱,不利于后期维护,更新, 调BUG也不方便, 可以使用组件把一个项目拆分成多个模块, 每一个模块使用一个组件来实现, 可实现代码分离, 结构清晰, 更易于阅读和维护更新<br />    有时在项目中, 一个模块可能在多个页面使用, 此时可以使用组件封装这个模块, 使用时调用组件,实现代码的复用,简化项目

<body>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    <div id='myApp'>
        组件中data的数据只能在组件自身的模板中使用, 不能直接在父组件或子组件模板中用
        <!-- {{age}}-{{sex}} -->
        <h1></h1>
        <!-- <mycom1>全局组件可以在任意一个组件的模板中调用</mycom1>
        <hr>
        <mycom2>局部组件只能在它的父组件模板中调用</mycom2> -->
        <!-- 组件可以用双标签写法, 也可以用如下单标签写法 -->
        <mycom2></mycom2>
        <!-- 组件名命名规则: 建议使用小驼峰命名, 调用时改成小写, 用-连接, 有语法提示 -->
        <my-com3></my-com3>
    </div>
    <script>
        // 在全局作用域中定义的组件叫全局组件, 在全局范围内都能使用
        // 使用Vue.component()创建全局组件, 第一个参数是组件名,第二个参数是组件配置
        Vue.component("mycom1", {
            // 在template字段中设置组件模板, 组件配置中至少要有模板
            template: `<header><nav>这是页面导航条{{age}}</nav> </header>`,
            // 组件中也有data动态数据, 通过data函数的返回值设置的
            data(){
                return {
                    // 由于不同组件的模板作用域是相互隔离的,所以组件的data数据只能在当前组件的模板中使用
                    age: 20
                }
            },
            // 组件中用于vue对象相同的功能,如, 过滤器,计算属性,函数,监视器,生命周期钩子
        })
        Vue.component("myCom3", {
            // 组件模板要求有且仅有一个根标签
            template:`<h1>123</h1>`
        })
        // vue对象就是vue项目中的根组件,必不可少, 而且有且仅有一个
        new Vue({
            el: '#myApp',
            data: { },
            methods: { },
            // 在一个组件的components字段中定义子组件(局部组件)
            components: {
                // 键值对结构, 分别是 组件名: {组件配置}
                mycom2: {
                    template: `<h2>我是子组件mycom2,性别:{{sex}}</h2>`,
                    data(){return {
                        sex: "男"
                    }},
                    created() {
                    },
                }
            }
        })
    </script>
</body>

vue组件模板

<body>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    <div id='myApp'>
        <my-com></my-com>
    </div>
    <!-- 在body中创建独立组件模板, 使用template标签创建模板 -->
    <template id="myTem">
        <!-- template中要求根标签有且仅有一个 -->
        <div>
            这是子组件
        </div>
    </template>
    <script>
        // 建议在根组件创建之前,创建子组件
        Vue.component("myCom", {
            // template: "<div></div>",
            template: "#myTem",
            data(){ 
                return{
                }
            }
        })
        new Vue({
            el: '#myApp',
            data: {
            },
            methods: {
            }
        })
    </script>
</body>