vue组件的数据传递

vue的一个重要特征就是组件化开发。那么如何实现组件之间的消息传递就显得尤为重要。vue给出了以下几种方式：

利用props实现父组件向子组件传递信息
子组件内利用$emit方法触发父组件的一个事件，同时可以传入参数实现子组件向父组件的数据传递。

下边以一个具体的例子做详细说明，这个例子中父组件利用props向子组件传递一个字符串，同时子组件设置相应的按钮，点击按钮实现子组件向父组件传递一个数据，以此改变父组件的fontSize值。具体代码如下：

<body>
    <div id="app1" :style="{ fontSize: size + 'px' }">
        <demo-props :message='message' @enlarge-text='enlargeText'></demo-props>       
    </div>
    <script>
        Vue.component('demo-props', {
            props: ['message'],
            template: `
            <div>               
                <button @click="$emit('enlarge-text',2)">2倍放大</button>
                <button @click="$emit('enlarge-text',4)">4倍放大</button>
                <p>{{message}}</p> 
            </div>`
        })
        var app1 = new Vue({
            el: "#app1",
            data: {
                size: 10,
                message: 'Hello world'
            },
            methods: {
                enlargeText: function (scale) {
                    this.size = this.size * scale;
                }
            }
        })
    </script>
</body>

以上代码有几点需要具体说明：

注册组件时，template后边不是单引号，而是键盘上数字键1左边的那个符号。
点击子组件的button，会执行$emit函数，该函数的第一个参数是在父级组件监听的事件名称，后边的参数都是子组件需要向父组件传递的数据。
注册组件时，props是一个数组，需要从父组件传递值的属性，都应该放在该数组内。当然vue也提供了一种方式让我们对props中的值做一些简单验证。此时props变成一个对象而不是一个存放字符串的数组。举例如下：

 Vue.component('my-component', {
            props: {
                propA: Number,           //propA的值必须是Number类型的
                propB: [Number, String],  //propB的值必须是Number类型或者String类型
                propC: {                 //propC的值是必须填写的字符串类型的
                    type: String,
                    required: true
                },
                propD: {                 //propD的值是一个Number的，且默认值是100
                    type: Number,
                    default: 100
                },
                propE: {                  //propE的值是一个有默认值的对象                 
                    type: Object,
                    default: function () {
                        return { message: 'Hello world' }
                    }
                },
                propF: {                  //propF有自自定义的验证方式，其值必须是'success', 'warning', 'danger'中的一个
                    validator: function (value) {
                        return ['success', 'warning', 'danger'].indexOf(value) !== -1;
                    }
                }
            }
        })

vue组件的数据传递

猜你喜欢