Vue——使用props传递数据

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检测。

posted @ 2020-04-12 22:29 明王不动心阅读(4381) 评论(0) 编辑收藏举报

刷新页面返回顶部

Vue——使用props传递数据

1.基本用法

2.单向数据流

3.数据验证

公告