vue 1.x 组件数据传递

2019年9月11日 120次阅读 来源: lkycan

本文章主要讲了组件如何进行数据的传递，从简单的组件里面的数据如何显示，子组件里面的数据显示，子组件获取父组件的数据，子组件主动发送数据给父组件。

1.获取父组件数据

疑问：多层事件可以通过冒泡获得，vue 里面的多层数据是不是也可以直接获取呢？

验证方法：

1.先在组件里面定义data 的数据，模版以及子组件

2.在子组件里面直接使用父组件里面的data数据

        components:{ //父级组件
            'aaa':{
                template:'<h2>我是aa组件</h2><bbb></bbb>',
                data(){
                    return {
                        msg:'我是父组件的数据'
                    }
                },
                components:{
                    'bbb':{//子级组件
                        template:'<h3>我是bbb-->{{msg}}</h3>'
                    }
                }
            }

结果:不能

实践结果是子级组件是不能直接获取父级的组件的数据

2.通过 props 从父级传递数据到子级

步骤：

1.子组件绑定父组件的数据

《vue 1.x 组件数据传递》

2.子组件里面传递别称的数据

《vue 1.x 组件数据传递》

代码例子

3.子组件传递数据的类型声明

可以在props 声明传递的数据的类型，如

                        props:{
                            'mmm':String,
                            'num':Number
                        },

实际代码例子

3.父组件获取子组件数据——> $emit()

实现步骤:

1.子组件 发送数据 vm.$emit(‘方法名’，’数据’);

2.父组件 接收数据 v-on: @ 实现相关方法

    <template id="aaa">
        <span>我是父级 -> {{msg}}</span>
        <bbb @msg-name='getData'></bbb>
    </template>

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>组件</title>
    <style>
     
        [v-cloak] { display: none }

        /*#box{
            width: 200px;
            height: 200px;
            background: red;
            margin: 0 auto;
        }*/


    </style>
</head>
<body>

    <div id="box">
        <aaa></aaa>
    </div>
    <template id="aaa">
        <span>我是父级 -> {{msg}}</span>
        <bbb @msg-name='getData'></bbb>
    </template>
    <template id="bbb">
        <h3>子组件-</h3>
        <input type="button" value="send" @click="send">
    </template>
<!--引入vue.js-->
<script src="../bower_components/vue/dist/vue.js"></script>
<script>

    var vm = new Vue({
        el:'body',
        data:{
            a:'aaa'
        },
        methods: {

        },
        // 第二个模版
        components:{ //局部组件
            'aaa':{
                template:'#aaa',
                data(){
                    return {
                        msg:'1255',
                        msg2:'我是父组件的数据'
                    }
                },
                methods:{
                    getData(msg){
                        // alert(msg);
                        this.msg =msg;
                    }
                },
                components:{
                    'bbb':{
                        // 
                        props:['mmm','myMsg'],
                        template:'#bbb',
                        data(){
                            return{ 
                                cdmsg:'我是子组件的数据'
                            }
                        },
                        methods:{
                            send(){
                                // alert(2);
                                this.$emit('msg-name',this.cdmsg);
                            }
                        }
                    }
                }
            }
        }
    });
    
</script>    
</body>

</html>

代码例子

    原文作者：lkycan
    原文地址: https://segmentfault.com/a/1190000010909542
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞