Vue組件建立和組件傳值

時間  2019-12-08
標籤 vue 組件 建立 简体版
原文   原文鏈接

Vue建立組件的方式

使用Vue.Extend()和Vue.component全局註冊組件

首先咱們定義一個組件並接收javascript

var com1 =Vue.extend({
            template:"<h3>這是經過Vue.extend建立的組件</h3>"
        });

而後咱們全局註冊這個組件css

Vue.component('mycom1',com1);

這樣咱們就能夠在咱們的代碼中使用咱們的mycom1組件了html

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

須要注意的是，若是咱們註冊的組件名稱是以駝峯命名法來命名的，那麼咱們在使用的時候將不能使用本來註冊時的命名，以下的寫法時錯誤的vue

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

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

咱們在使用的時候須要將駝峯命名法的兩個單詞使用‘-’進行分開，而且更加推薦‘-’左右兩端的單詞均使用小寫，以下java

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="lib/vue-2.4.0.js" ></script>
        <script type="text/javascript" src="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>

同時咱們能夠將構造和註冊結合在一塊兒bootstrap

Vue.component('myCom1',Vue.extend({
            template:"<h3>這是經過Vue.extend建立的組件</h3>"
        }));

更加簡化的方式app

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" src="lib/vue-2.4.0.js" ></script>
        <script type="text/javascript" src="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-resource

Vue.component私有組件

Vue對象內部有一個components組件，能夠定義咱們想要的組件this

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="lib/vue-2.4.0.js" ></script>
        <script type="text/javascript" src="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" src="lib/vue-2.4.0.js" ></script>
        <script type="text/javascript" src="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" src="lib/vue-2.4.0.js" ></script>
        <script type="text/javascript" src="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" src="lib/vue-2.4.0.js" ></script>
        <script type="text/javascript" src="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" src="lib/vue-2.4.0.js" ></script>
        <script type="text/javascript" src="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" src="lib/vue-2.4.0.js" ></script>
        <script type="text/javascript" src="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" src="lib/vue-2.4.0.js" ></script>
        <script type="text/javascript" src="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來進行傳遞，傳遞的第一個參數都是函數名，後面的參數都是傳遞的數據，能夠傳遞單個屬性或者是對象

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程