为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 Vue组件创建和传值

Vue组件创建和传值

标签：
Vue.js

Vue创建组件的方式

使用Vue.Extend()和Vue.component全局注册组件

首先我们定义一个组件并接收

        var com1 =Vue.extend({            template:"<h3>这是通过Vue.extend创建的组件</h3>"
        });

然后我们全局注册这个组件

        Vue.component('mycom1',com1);

这样我们就可以在我们的代码中使用我们的mycom1组件了

        <div id="app">
            
        <mycom1></mycom1>
        </div>

需要注意的是，如果我们注册的组件名称是以驼峰命名法来命名的，那么我们在使用的时候将不能使用原本注册时的命名，如下的写法时错误的

//定义
Vue.component('myCom1',com1);

//使用        <div id="app">
            
        <myCom1></myCom1>
        </div>

我们在使用的时候需要将驼峰命名法的两个单词使用‘-’进行分开，并且更加推荐‘-’左右两端的单词均使用小写，如下

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="lib/vue-2.4.0.js" ></script>
        <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="lib/vue-resource-1.3.4.js"></script>
        <link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
    </head>
    <body>
        <div id="app">
            
        <my-com1></my-com1>
        </div>

    <script>
        var com1 =Vue.extend({
            template:"<h3>这是通过Vue.extend创建的组件</h3>"
        });
        Vue.component('myCom1',com1);        var vm = new Vue({
            el:'#app',
            data:{
            }
            
        })    </script>
    </body></html>

同时我们可以将构造和注册结合在一起

        Vue.component('myCom1',Vue.extend({
            template:"<h3>这是通过Vue.extend创建的组件</h3>"
        }));

更加简化的方式

        Vue.component('myCom1',{
            template:"<h3>这是通过Vue.extend创建的组件</h3>"
        });

需要注意的是，我们不管使用哪种方式来定义组件，template中定义的顶级元素只能有一个，否则会出现错误

使用Vue.component()配合Vue的templete标签来定义组件

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="lib/vue-2.4.0.js" ></script>
        <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="lib/vue-resource-1.3.4.js"></script>
        <link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
    </head>
    <body>
        <div id="app">
            <my-com1></my-com1>
        </div>

    <template id="mycom2">
        <h3>这是通过Templete定义的组件，在html代码中有智能提示</h3>
    </template>
    <script>
        Vue.component('myCom1',{
            template:"#mycom2"
        });        var vm = new Vue({
            el:'#app',
            data:{
            }
            
        })    </script>
    </body></html>

需要注意的是，上述的定义方式都是定以的全局Vue对象均可使用，下面我们定义一个私有的组件

Vue.component私有组件

Vue对象内部有一个components组件，可以定义我们想要的组件

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="lib/vue-2.4.0.js" ></script>
        <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="lib/vue-resource-1.3.4.js"></script>
        <link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
    </head>
    <body>
        <div id="app">
            <login></login>
        </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
            },
            components:{
                login:{
                    template:'<h3>这是私有的login组件</h3>'
                }
            }
            
        })    </script>
    </body></html>

同时仍然可以使用上述的template方式来定义组件

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="lib/vue-2.4.0.js" ></script>
        <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="lib/vue-resource-1.3.4.js"></script>
        <link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
    </head>
    <body>
        <div id="app">
            <login></login>
        </div>
    <template id="app2">
        <h3>这是私有组件配合template方式定义的组件</h3>
    </template>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
            },
            components:{
                login:{
                    template:'#app2'
                }
            }
            
        })    </script>
    </body></html>

组件的data

定义的组件可以有自己的data数据域，但是data必须为一个function且必须返回一个对象格式的数据，除此之外和Vue对象中的data的使用方法完全一致

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="lib/vue-2.4.0.js" ></script>
        <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="lib/vue-resource-1.3.4.js"></script>
        <link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
    </head>
    <body>
        <div id="app">
            <login></login>
        </div>
    <template id="app2">
        <h3>这是私有组件配合template方式定义的组件---{{msg}}</h3>
    </template>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
            },
            components:{
                login:{
                    template:'#app2',
                    data:function(){                        return {
                            msg:"这是组件中的数据"
                        }
                    }
                }
            }
            
        })    </script>
    </body></html>

组件切换

使用v-if和v-else实现组件切换

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="lib/vue-2.4.0.js" ></script>
        <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="lib/vue-resource-1.3.4.js"></script>
        <link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
    </head>
    <body>
        <div id="app">
            <a href="#" @click.prevent="flag=true">登录</a>
            <a href="#" @click.prevent="flag=false">注册</a>
            <login v-if="flag"></login>
            <register v-else="flag"></register>
        </div>
    <template id="app2">
        <h3>这是登录组件</h3>
    </template>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                flag:true
            },
            components:{
                login:{
                    template:'#app2',
                },
                register:{
                    template:'<h3>注册组件</h3>',

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

不过使用这种方式只能实现两种类型的组件切换

使用component元素进行组件切换

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="lib/vue-2.4.0.js" ></script>
        <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="lib/vue-resource-1.3.4.js"></script>
        <link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
    </head>
    <body>
        <div id="app">
            <a href="#" @click.prevent="comName='login'">登录</a>
            <a href="#" @click.prevent="comName='register'">注册</a>
            <component :is="comName"></component>
        </div>
    <template id="app2">
        <h3>这是登录组件</h3>
    </template>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                comName:'login'
            },
            components:{
                login:{
                    template:'#app2',
                },
                register:{
                    template:'<h3>注册组件</h3>',

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

我们使用定义在data中的属性来切换component中要展示的组件，使用:is来代表最后要展示的组件的值

父子组件传值

父组件向子组件传递数据

子组件默认无法直接访问到父组件（对象）中的数据，需要使用v-bind表达式来传递，结合组件的props属性来使用，即可达到父组件向子组件传递数据

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="lib/vue-2.4.0.js" ></script>
        <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="lib/vue-resource-1.3.4.js"></script>
        <link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
    </head>
    <body>
        <div id="app">
            <login v-bind:parentmsg="msg"></login>
        </div>
    <template id="app2">
        <h3>这是私有组件配合template方式定义的组件--{{parentmsg}}</h3>
    </template>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:"这是父组件中的数据"
            },
            components:{
                login:{
                    template:'#app2',
                    data(){                        return {
                            name:'zhangsan',
                            age:'24'
                        }
                    },
                    props:['parentmsg']
                }

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

需要注意的是，通过props传递过来的数据是不推荐被修改的，强行修改会报错

props中定义的属性全部都是由父组件传递给子组件的

而子组件data中的数据是组件私有，可以被修改的

子组件向父组件传递数据

子组件向父组件传值是通过父组件向子组件传递事件实现的

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="lib/vue-2.4.0.js" ></script>
        <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="lib/vue-resource-1.3.4.js"></script>
        <link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
    </head>
    <body>
        <div id="app">
            <login @func="show"></login>
        </div>
    <template id="app2">
        <input type="button" value="子组件按钮" @click="myclick" />
    </template>
    <script>
        var vm = new Vue({            el:'#app',            data:{                msg:"这是父组件中的数据"
            },            methods:{
                show(data){                    console.log("这是父组件的事件"+data)
                }
            },            components:{                login:{                    template:'#app2',
                    data(){                        return {                            name:'zhangsan',                            age:'24'
                        }
                    },                    props:['parentmsg'],                    methods:{
                        myclick(){                            this.$emit('func',this.name);
                        }
                    }
                }

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

从如上代码可知，父组件调用子组件中的数据需要借助this.$emit来进行传递，传递的第一个参数都是函数名，后面的参数都是传递的数据，可以传递单个属性或者是对象



作者：镇屌要逆袭
链接：https://www.jianshu.com/p/393abd60a6ac


点击查看更多内容
发表于 2018.08.23 20:05， 共 1622 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

SMILET

手记
篇
粉丝
80
获赞与收藏
441

关注作者，订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消