vue 1.x 组件数据传递

来源：互联网发布：阿里云服务器增加磁盘编辑：程序博客网时间：2024/06/07 10:16

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

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.子组件绑定父组件的数据

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

代码例子

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>

代码例子

阅读全文

0 0

vue 1.x 组件数据传递

1.获取父组件数据

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

验证方法：

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

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

结果:不能

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

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

步骤：

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

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

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

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

实现步骤:

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

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

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

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