摘要:本文章主要讲了组件如何进行数据的传递,从简单的组件里面的数据如何显示,子组件里面的数据显示,子组件获取父组件的数据,子组件主动发送数据给父组件。
本文章主要讲了组件如何进行数据的传递,从简单的组件里面的数据如何显示,子组件里面的数据显示,子组件获取父组件的数据,子组件主动发送数据给父组件。
1.获取父组件数据 疑问:多层事件可以通过冒泡获得,vue 里面的多层数据是不是也可以直接获取呢? 验证方法: 1.先在组件里面定义data 的数据,模版以及子组件 2.在子组件里面直接使用父组件里面的data数据components:{ //父级组件 "aaa":{ template:"结果:不能 实践结果是子级组件是不能直接获取父级的组件的数据 2.通过 props 从父级传递数据到子级 步骤: 1.子组件绑定父组件的数据 2.子组件里面传递别称的数据我是aa组件
", data(){ return { msg:"我是父组件的数据" } }, components:{ "bbb":{//子级组件 template:" 我是bbb-->{{msg}}
" } } }
代码例子
3.子组件传递数据的类型声明可以在props 声明传递的数据的类型,如
props:{ "mmm":String, "num":Number },
实际代码例子
3.父组件获取子组件数据——> $emit() 实现步骤: 1.子组件 发送数据 vm.$emit("方法名","数据"); 2.父组件 接收数据 v-on: @ 实现相关方法我是父级 -> {{msg}}
代码:
组件 我是父级 -> {{msg}}子组件-
代码例子
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/112487.html
摘要:本文章主要讲了组件如何进行数据的传递,从简单的组件里面的数据如何显示,子组件里面的数据显示,子组件获取父组件的数据,子组件主动发送数据给父组件。 本文章主要讲了组件如何进行数据的传递,从简单的组件里面的数据如何显示,子组件里面的数据显示,子组件获取父组件的数据,子组件主动发送数据给父组件。 1.获取父组件数据 疑问:多层事件可以通过冒泡获得,vue 里面的多层数据是不是也可以直接获取呢...
摘要:本文章主要讲了组件如何进行数据的传递,从简单的组件里面的数据如何显示,子组件里面的数据显示,子组件获取父组件的数据,子组件主动发送数据给父组件。 本文章主要讲了组件如何进行数据的传递,从简单的组件里面的数据如何显示,子组件里面的数据显示,子组件获取父组件的数据,子组件主动发送数据给父组件。 1.获取父组件数据 疑问:多层事件可以通过冒泡获得,vue 里面的多层数据是不是也可以直接获取呢...
摘要:事件总线事件总线首先创建了一个名为的空的实例然后全局定义了组件最后创建了实例。在父组件模板中,子组件标签上使用指定一个名称,并在父组件内通过来访问指定名称的子组件。 学习笔记:组件详解 组件详解 组件与复用 Vue组件需要注册后才可以使用。注册有全局注册和局部注册两种方式。 全局注册 Vue.component(my-component, {}); 要在父实例中使用这个组件,必须要...
摘要:组件之间的数据交互方式父子级数据同步方法与同音我是父级,我的数据是在这里加入方法改变我是子级数据部分今天天气不错父级数据改变数据版本利用了原生的对象特性引用当父级数据是对象形式的时候在作用域中传递的就不再是以值的形式传递,而是 组件之间的数据交互方式 父子级数据同步: 1.x方法: .sync - 与think同音 我是父级,我的数据是=>{{msg1}} ...
阅读 1498·2021-11-23 09:51
阅读 3577·2021-09-26 09:46
阅读 2102·2021-09-22 10:02
阅读 1765·2019-08-30 15:56
阅读 3295·2019-08-30 12:51
阅读 2189·2019-08-30 11:12
阅读 2025·2019-08-29 13:23
阅读 2301·2019-08-29 13:16