vue 1.x 组件数据传递

Aldous 发布于2019-08-29 13:16 / 2173人阅读

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

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

1.获取父组件数据 疑问：多层事件可以通过冒泡获得，vue 里面的多层数据是不是也可以直接获取呢？ 验证方法： 1.先在组件里面定义data 的数据，模版以及子组件 2.在子组件里面直接使用父组件里面的data数据

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

结果:不能 实践结果是子级组件是不能直接获取父级的组件的数据 2.通过 props 从父级传递数据到子级 步骤： 1.子组件绑定父组件的数据

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

代码例子

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

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

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

实际代码例子

3.父组件获取子组件数据——> $emit() 实现步骤: 1.子组件发送数据 vm.$emit("方法名"，"数据"); 2.父组件接收数据 v-on: @ 实现相关方法

代码：

代码例子

专线服务私有云 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112487.html

vue 1.x 组件数据传递

摘要：本文章主要讲了组件如何进行数据的传递，从简单的组件里面的数据如何显示，子组件里面的数据显示，子组件获取父组件的数据，子组件主动发送数据给父组件。本文章主要讲了组件如何进行数据的传递，从简单的组件里面的数据如何显示，子组件里面的数据显示，子组件获取父组件的数据，子组件主动发送数据给父组件。 1.获取父组件数据疑问：多层事件可以通过冒泡获得，vue 里面的多层数据是不是也可以直接获取呢...

cnsworder 2019-08-01 17:29 评论0 收藏0
vue 1.x 组件数据传递

摘要：本文章主要讲了组件如何进行数据的传递，从简单的组件里面的数据如何显示，子组件里面的数据显示，子组件获取父组件的数据，子组件主动发送数据给父组件。本文章主要讲了组件如何进行数据的传递，从简单的组件里面的数据如何显示，子组件里面的数据显示，子组件获取父组件的数据，子组件主动发送数据给父组件。 1.获取父组件数据疑问：多层事件可以通过冒泡获得，vue 里面的多层数据是不是也可以直接获取呢...

darkerXi 2019-08-20 19:01 评论0 收藏0
Vue.js-组件详解

摘要：事件总线事件总线首先创建了一个名为的空的实例然后全局定义了组件最后创建了实例。在父组件模板中，子组件标签上使用指定一个名称，并在父组件内通过来访问指定名称的子组件。学习笔记：组件详解组件详解组件与复用 Vue组件需要注册后才可以使用。注册有全局注册和局部注册两种方式。全局注册 Vue.component(my-component, {}); 要在父实例中使用这个组件，必须要...

jeffrey_up 2019-08-23 16:02 评论0 收藏0
Vue-组件详解

摘要：除了监听事件外，还可以用于组件之间的自定义事件。它仅仅作为一个直接访问子组件的应急方案，应当避免在模板或计算属性中使用。将和合并成，会自动去判断是普通标签还是组件。子组件这里的状态绑定的是父组件的数据。查看原文站点，更多扩展内容及更佳阅读体验！组件详解组件与复用 Vue组件需要注册后才可以使用。注册有全局注册和局部注册两种方式。全局注册 Vue.component(my-com...

dadong 2019-08-26 12:00 评论0 收藏0
初学Vue（四）-- 同级组件之间的数据交互

摘要：组件之间的数据交互方式父子级数据同步方法与同音我是父级，我的数据是在这里加入方法改变我是子级数据部分今天天气不错父级数据改变数据版本利用了原生的对象特性引用当父级数据是对象形式的时候在作用域中传递的就不再是以值的形式传递，而是组件之间的数据交互方式父子级数据同步： 1.x方法： .sync - 与think同音我是父级，我的数据是=>{{msg1}} ...

tinyq 2019-08-26 10:36 评论0 收藏0