vue 组件

组件的出现，就是为了拆分vue实例的代码量，能够以不同的组件划分不同的功能模块，将来需要什么功能就能调用对应的组件

组件化和模块化的不同：
模块化（node.js）是从代码逻辑的角度划分:方便代码开发，保证每个功能模块的职能单一
组件化是从页面UI角度进行划分：前端的组件化，方便UI组件的重用

1.创建组件方式1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../modules/vue/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <p>{{msg}}</p>
    <!--如果要使用组件，直接将组件的名称以标签形式引入到html中，-->
    <my-com1></my-com1>
</div>

<script>
    // 1、使用vue.extend来创建全局的组件
    var com1 = Vue.extend({
        template:'<h3>vue.extend创建的组件</h3>',// 指定组件要展示的html结构
    })

    // 2、使用Vue.component('组件名称',创建出来的组件模板对象)
    // 定义的时候名称可以用驼峰，但是使用的时候要切成小写横杆，否则就正常小写
    Vue.component('myCom1',com1)

   // 一步完成注册与指定
    /*
    Vue.component('myCom1',Vue.extend({
        // template模板指向的内容只能有唯一一个根元素
        template:'<h3>vue.extend创建的组件</h3>',// 指定组件要展示的html结构
    }))
    */

    var app = new Vue({
        el:"#app",
        data:{
            msg: "123",
        },
        methods:{
            getInfo:function () {}
        },
    })
</script>
</body>
</html>

2.创建组件方式2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../modules/vue/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <p>{{msg}}</p>
    <div id="tmpl"></div>
    <!--如果要使用组件，直接将组件的名称以标签形式引入到html中，-->
    <my-com1></my-com1>
</div>

<script>
    Vue.component('myCom2',Vue.extend({
        // template模板指向的内容只能有唯一一个根元素
        template:'#tmpl',// 指定组件要展示的html结构
    }))

    var app = new Vue({
        el:"#app",
        data:{
            msg: "123",
        },
        methods:{
            getInfo:function () {}
        },
    })
</script>
</body>
</html>

3.私有组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../modules/vue/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <p>{{msg}}</p>
    <div id="tmpl"></div>
    <login></login>
</div>

<script>

    var app = new Vue({
        el:"#app",
        data:{
            msg: "123",
        },
        methods:{
            getInfo:function () {}
        },
        components:{
            login:{
                template:'#tmpl'
            }

        }
    })
</script>
</body>
</html>

4.组件中的data

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../modules/vue/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <p>{{msg}}</p>
    <login></login>
    <register></register>
</div>

<script>

    var app = new Vue({
        el:"#app",
        data:{
            msg: "123",
        },
        methods:{
            getInfo:function () {}
        },
        components:{
            login:{
                template:'<div id="login_t">{{login_msg}}</div>',
                data:function () {// 组件可以有自己的data，但是data是function
                    return {
                        login_msg: "登录",
                    }
                }
            },
            register:{
                template:'<div id="register_t">{{register_msg}}</div>',
                data:function () {// 组件可以有自己的data，但是data是function
                    return {
                        register_msg: "注册"
                    }
                }
            },

        }
    })
</script>
</body>
</html>

5.使用vue提供的component

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../modules/vue/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <component :is="comName"></component>
</div>

<script>

    var app = new Vue({
        el:"#app",
        data:{
            msg: "123",
            comName:'login'
        },
        methods:{
            getInfo:function () {}
        },
        components:{
            login:{
                template:'<div id="login_t">{{login_msg}}</div>',
                data:function () {// 组件可以有自己的data，但是data是function
                    return {
                        login_msg: "登录",
                    }
                }
            },
            register:{
                template:'<div id="register_t">{{register_msg}}</div>',
                data:function () {// 组件可以有自己的data，但是data是function
                    return {
                        register_msg: "注册"
                    }
                }
            },

        }
    })
</script>
</body>
</html>

6.组件传值--父组件向子组件传值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../modules/vue/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <!--父组件可以在引用子组件的时候通过属性绑定的形式把需要传递给子组件的数据以属性绑定的形式传递到子组件内部-->
    <component :is="comName" v-bind:parentmsg="msg"></component>
</div>

<script>

    var app = new Vue({
        el:"#app",
        data:{
            msg: "123，父组件中的数据",
            comName:'login'
        },
        methods:{
            getInfo:function () {}
        },
        components:{
            login:{
                template:'<div id="login_t">{{parentmsg}}</div>',
                // data里的数据是子组件自己私有的数据，父组件传过来的在props里，data里的数据可读可写，props中的数据都是只读的
                data:function () {
                    return {
                        login_msg: "登录",
                    }
                },
                props:['parentmsg']// 把父组件传过来的parentmsg在props中定义，才能进行使用
            },
            register:{
                template:'<div id="register_t">{{register_msg}}</div>',
                data:function () {// 组件可以有自己的data，但是data是function
                    return {
                        register_msg: "注册"
                    }
                }
            },
        }
    })
</script>
</body>
</html>

6.子组件调用父组件的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../modules/vue/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <!--父组件向子组件传递方法使用的是事件绑定机制-->
    <!--<component :is="comName" v-bind:parentmsg="msg" v-on:func="show"></component>-->
    <component :is="comName" v-bind:parentmsg="msg" @func123="show"></component>
</div>

<script>

    var app = new Vue({
        el:"#app",
        data:{
            msg: "123，父组件中的数据",
            comName:'login'
        },
        methods:{
            show:function (data) {
                console.log("调用父组件方法" + data)
            }
        },
        components:{
            login:{
                template:'<div id="login_t">{{parentmsg}}<input type="button" value="调用方法" @click="myclick"/></div>',
                // data里的数据是子组件自己私有的数据，父组件传过来的在props里，data里的数据可读可写，props中的数据都是只读的
                data:function () {
                    return {
                        login_msg: "登录",
                    }
                },
                methods:{
                    myclick:function () {
                        var data = "123";
                        // 从第二个参数开始传参
                        this.$emit('func123',data);
                    }
                },
                props:['parentmsg']// 把父组件传过来的parentmsg在props中定义，才能进行使用
            },
            register:{
                template:'<div id="register_t">{{register_msg}}</div>',
                data:function () {// 组件可以有自己的data，但是data是function
                    return {
                        register_msg: "注册"
                    }
                }
            },

        }
    })
</script>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。