Vue——使用props傳遞數據

本文轉載自查看原文 2020-04-12 22:29 3404 vue

1.基本用法

組件不僅僅是要把模板的內容進行復用,更重要的是組件之間要進行通訊。
通常父組件的模板中包含子組件,父組件要正向的向子組件傳遞數據或者參數。
這個正向傳遞數據的就是通過props來實現的。

props中聲明的數據與組件data函數return的數據的主要區別在於props來自父級,而data組件的數據是自己的數據,作用域是組件本身。
這兩種數據都可以在模板template及計算屬性和方法methods中使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <my-component message="來自父組件的數據"></my-component>
    </div>
    <script>
        // var data = {
        //     message: 'ceshi'  //直接定義行不通,在app中定義也行不通,還只能在父級標簽中定義,也許組件就是如此定義的
        // };

        Vue.component('my-component',{
            props: ['message'],  //接收數據,如果需要傳遞多個參數,那么只需要在數組中添加就可以了
            template: '<div>{{ message }}</div>'  //將數字帶入標簽里面
            // data: function () {
            //     return data;
            // }
        });

        var app = new Vue({
            el: "#app",
        })
    </script>

</body>
</html>

需要說明的是，由於HTML特性不區分大小寫，同時無視'-'，所以在定義變量的時候可以比較靈活。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <my-component message-Test="HTML不區分大小寫"></my-component>  <!--不區分大小,-也無法識別-->
    </div>

    <script>
        Vue.component('my-component',{
            props: ['messageTest'],  //但是在js中就不能隨便添加“-”
            template:'<div>{{ messageTest }}</div>'
        });

        var app = new Vue({  //app這個對象你還必須要定義,不然組件也無法使用
            el: "#app",
        })

    </script>

</body>
</html>

有時候傳遞的數據並不是直接寫死，而是來自父級的動態數據，這時可以使用v-bind來動態綁定props的值。
當父組件的數據變化時，也會傳遞給子組件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="parentMessage">
        <my-component :message="parentMessage"></my-component>  

    </div>
    <script>
        Vue.component('my-component',{
            props: ['message'],
            template:'<div>{{ message }}</div>'
        });
        var app = new Vue({
            el: "#app",
            data: {
                parentMessage: '',
            }
        })
    </script>

</body>
</html>

:xxx = “yyy”代表綁定的是一個變量，yyy是一個JS表達式，和xxx="yyy"的性值完全不同。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <my-component :message="[1,2,3]"></my-component>  <!--綁定的一個數組→  3
        <my-component message="[1,2,3]"></my-component>  <!-- 當作一個字符串來處理→  7
    </div>
    <script>
        Vue.component('my-component',{
            props: ['message'],
            template: '<div>{{ message.length }}</div>'
        });
        var app = new Vue({
            el: "#app",
        })

    </script>
</body>
</html>

2.單向數據流

在Vue1的版本中采用的是雙向數據流，也就是父子組件可以直接雙向通訊。

業務中會經常遇到兩種需要改變prop的情況：
一種是父組件傳遞初始值進來，子組件將它作為初始值保存起來，在自己的作用域下可以隨意修改。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <my-component message="來自父組件的數據"></my-component>  <!--:一般是命令-->
    </div>
    <script>
        Vue.component('my-component',{
            props: ['message'],
            template: '<div>{{ newMessage }}</div>',
            data: function () {
                return {
                    newMessage: this.message + '????'  //在這里只需要維護newMessage這個變量就可以了
                }
            }
        });
        var app = new Vue({  // Vue定義必須放在組件后面,因為放在前面在加載的時候就沒有加載組件
            el: "#app",
        });
    </script>

</body>
</html>

另一種情況就是prop作為需要被轉變的原始值傳入。這種情況用計算屬性就可以了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <my-component width="1000" height="1000"></my-component>
    </div>
    <script>
        Vue.component('my-component',{
            props: ["width",'height'],
            template: '<div style="style">組件內容</div>',
            computed:{
                style: function () {
                    return {
                        width: this.width + 'px',
                        height: this.height + 'px'
                    }
                }
            }
        });
        var app = new Vue({
            el: "#app"
        })
    </script>
</body>
</html>

3.數據驗證

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div id="app">

    </div>
    <script>
        Vue.component('my-component',{
            props:{
                //必須是數字類型
                propA: Number,
                //必須是字符串和數字類型
                propB: [String,Number],
                //布爾值,如果沒有定義,默認值就是true
                propC: {
                    type: Boolean,
                    default: true,
                },
                //數字,而且是必傳
                propD: {
                    type: Number,
                    required: true,
                },
                //如果是數組或對象,默認值必須是一個函數來返回
                propE: {
                    type: Array,
                    default: function () {
                        return [];
                    }
                },
                //自定義一個驗證函數
                propF: {
                    validator: function (value) {
                        return value > 10;
                    }
                }
            }
        });
        var app = new Vue({
            el: "#app"
        })
    </script>
</body>
</html>

驗證的type類型可以是：
　　String
　　Number
　　Boolean
　　Object
　　Array
　　Function
type也可以是一個自定義構造器，使用instanceof檢測。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue組件詳解（二）——使用props傳遞數據 VUE中父組件向子組件傳遞數據 props使用 vue2中component父子組件傳遞數據props的使用 props傳遞數據 VUE 異步數據傳遞給 component props 的問題 vue 父組件通過props向子組件傳遞數據/方法的方式 Vue.js學習筆記：props傳遞數據(轉) Vue將props值實時傳遞並可修改詳解vue父組件傳遞props異步數據到子組件的問題 [轉]詳解vue父組件傳遞props異步數據到子組件的問題