Vue_(組件通信)父組件向子組件傳值

時間  2019-11-13
標籤 vue 組件 通信 简体版
原文   原文鏈接

　　

 

　　Vue組件　　傳送門javascript

 

　　父組件向子組件傳值：父組件經過屬性向下傳值的方式和子組件通訊；html

　　使用步驟：vue

　　　　一、定義組件：現有自定義組件com-a、com-b，com-a是com-b的父組件java

　　　　二、準備獲取數據：com-b要獲取父組件data中的name屬性數組

　　　　三、在<com-b :name=「name」></com-b> 使用v-bind 綁定name屬性，紅色部分爲屬性名稱，能夠隨意寫ide

　　　　四、在子組件定義部分裏添加選項，值是個字符串數組 props:[‘name’]，將上邊紅色的屬性名稱寫在這裏ui

　　　　五、以後就可定義在子組件中使用name屬性了spa

 

　　Learn：code

　　　　1、父組件向子組件傳值 component

　　　　2、Props選項高級選項配置 

 

　　目錄結構

　　

 

 

 

1、父組件向子組件傳值

　　須要在父組件中用v-bind綁定name屬性

<template id="father-template">
        <div>
            <h1>father component</h1>
            myData : <span>{{name}}</span><br />
            <input type="text" v-model="name"/>
            <hr />
            
            <child-component :name="name"></child-component>
        </div>
    </template>

 

　　在Vue中components屬性中經過props選項給子組件綁定name標籤

        new Vue({
            data : {
                
            },
            components : {
                "father-component" : {
                    data(){
                        return {
                            name : 'Gary'
                        }
                    },
                    template :  "#father-template",
                    components : {
                        "child-component" : {
                            template : "#child-template",
                            props:['name']
                        }
                    }
                }
            }
        }).$mount("#GaryId");

 

　　在子組件中就能夠直接經過{{props}}將值傳遞過去

    <template id="child-template">
        <div>
            <h2>child component</h2>
            fatherData : <span>{{name}}</span>
        </div>
    </template>

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Gary</title>
    </head>
    <body>
        <div id="GaryId">
            <father-component></father-component>
        </div>
    </body>

<template id="father-template">
        <div>
            <h1>father component</h1>
            myData : <span>{{name}}</span><br />
            <input type="text" v-model="name"/>
            <hr />
            
            <child-component :name="name"></child-component>
        </div>
    </template>
    
    <template id="child-template">
        <div>
            <h2>child component</h2>
            fatherData : <span>{{name}}</span>
        </div>
    </template>

    <script type="text/javascript" src="../js/vue.js" ></script>
    <script type="text/javascript">
    
        new Vue({
            data : {
                
            },
            components : {
                "father-component" : {
                    data(){
                        return {
                            name : 'Gary'
                        }
                    },
                    template :  "#father-template",
                    components : {
                        "child-component" : {
                            template : "#child-template",
                            props:['name']
                        }
                    }
                }
            }
        }).$mount("#GaryId");
    
    </script>
</html>
Gary_fatherAndChild.html

 

　　在father組件的<child-component>組件中使用多個v-bind屬性可實現多組數值傳遞

<template id="father-template">
        <div>
            <h1>father component</h1>
            myData : <span>{{name}},{{id}},{{user.username}}</span><br />
            fatherDate : <span>msg</span><br />
            <input type="text" v-model="name"/>
            <hr />
            
            <child-component :name="name" :id="id" :user="user"></child-component>
        </div>
    </template>

 

　　Vue中給子組件添加user對象，以及給對象初始值msg:'helloVue'並在父組件中經過<father-component :msg="msg"></father-component>中直接使用

        new Vue({
            data : {
                 msg:'helloVue'
            },
            components : {
                "father-component" : {
                    data(){
                        return {
                            id:1,
                            name : 'Gary',
                            user:{
                                username:'Gary520',
                                password:'5201314'
                                
                            }
                        }
                    },
                    props:['msg'],
                    template :  "#father-template",
                    components : {
                        "child-component" : {
                            template : "#child-template",
                            props:['name','id','user']
                        }
                    }
                }
            }
        }).$mount("#GaryId");

 

 

　　同理在父組件中調用數據

    <template id="child-template">
        <div>
            <h2>child component</h2>
            fatherData : <span>{{name}},{{id}},{{user.username}}</span>
        </div>
    </template>

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Gary</title>
    </head>
    <body>
        <div id="GaryId">
            <father-component :msg="msg"></father-component>
        </div> 
    </body>

<template id="father-template">
        <div>
            <h1>father component</h1>
            myData : <span>{{name}},{{id}},{{user.username}}</span><br />
            fatherDate : <span>msg</span><br />
            <input type="text" v-model="name"/>
            <hr />
            
            <child-component :name="name" :id="id" :user="user"></child-component>
        </div>
    </template>
    
    <template id="child-template">
        <div>
            <h2>child component</h2>
            fatherData : <span>{{name}},{{id}},{{user.username}}</span>
        </div>
    </template>

    <script type="text/javascript" src="../js/vue.js" ></script>
    <script type="text/javascript">
    
        new Vue({
            data : {
                 msg:'helloVue'
            },
            components : {
                "father-component" : {
                    data(){
                        return {
                            id:1,
                            name : 'Gary',
                            user:{
                                username:'Gary520',
                                password:'5201314'
                                
                            }
                        }
                    },
                    props:['msg'],
                    template :  "#father-template",
                    components : {
                        "child-component" : {
                            template : "#child-template",
                            props:['name','id','user']
                        }
                    }
                }
            }
        }).$mount("#GaryId");
    
    </script>
</html>
Gary_fatherAndChild.html

 

 

 2、Props選項高級選項配置　　傳送門

　　使用Props還能夠實現許多功能，如設置默認值、數據校驗、設置返回值

new Vue({
            data : {
                
            },
            components : {
                "father-component" : {
                    data(){
                        return {
                            id : '01',
                            name : 'Gary',
                            user : {
                                username : 'Gary520',
                                password : '5201314'
                            },
                            age : 20
                        }
                    },
                    props : ['msg'],
                    template :  "#father-template",
                    components : {
                        "child-component" : {
                            template : "#child-template",
                            //props : ['username', 'id', 'user']
                            props : {
                                name : {
                                    type : String,
                                    //必須得傳值可以使用required : true,
                                    default : "Garydef"
                                },
                                id : [Number, String],
                                user : {
                                    type : Object,
                                    default : function(){
                                        return {username : 'userGary', password : 'pw123'};
                                    }
                                },
                                age : {
                                    type : Number,
                                    validator : function(value){
                                        return value >= 0;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }).$mount("#GaryId");

 

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Gary</title>
    </head>
    <body>
        <div id="GaryId">
                <father-component></father-component>
        </div> 
    </body>

<template id="father-template">
            <div>
            <h1>father component</h1>
            myData : 
            <span>
                {{name}} , 
                {{id}} , 
                {{user.username}} , 
                {{age}}
            </span><br /><hr />
            <child-component  :id="id" :age="age"></child-component>
        </div>
    </template>
    
    <template id="child-template">
        <div>
            <h2>child component</h2>
            fatherData : 
            <span>
                {{name}} , 
                {{id}} , 
                {{user.username}},
                {{age}}
            </span>
        </div>
    </template>

    <script type="text/javascript" src="../js/vue.js" ></script>
    <script type="text/javascript">
    
            new Vue({
            data : {
                
            },
            components : {
                "father-component" : {
                    data(){
                        return {
                            id : '01',
                            name : 'Gary',
                            user : {
                                username : 'Gary520',
                                password : '5201314'
                            },
                            age : 20
                        }
                    },
                    props : ['msg'],
                    template :  "#father-template",
                    components : {
                        "child-component" : {
                            template : "#child-template",
                            //props : ['username', 'id', 'user']
                            props : {
                                name : {
                                    type : String,
                                    //必須得傳值可以使用required : true,
                                    default : "Garydef"
                                },
                                id : [Number, String],
                                user : {
                                    type : Object,
                                    default : function(){
                                        return {username : 'userGary', password : 'pw123'};
                                    }
                                },
                                age : {
                                    type : Number,
                                    validator : function(value){
                                        return value >= 0;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }).$mount("#GaryId");
    
    </script>
</html>
Gary_props.html
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程