摘要:袓组件我是祖组件要给孙组件准备的儿组件孙组件二的事件方式子向父传递兄弟之间组件我是兄长,弟弟收好了组件兄长,弟弟收到了。
一、vue的传值方式
//child porops:{msg:String} //parent
//child data(){ return { hw:"我是子类父类可以调用" } } //parentthis.$refs.hw
provide:就相当于加强版父组件propinject:就相当于加强版子组件的props
只要在上一层级的声明的provide,那么下一层级无论多深都能够通过inject来访问到provide的数据
提示:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。
如果需要传可响应的值,请使用引用类型的数值,比如{}||[]等。
袓组件
儿组件
孙组件
二、vue的事件方式{{msg}}
//child this.$emit("add",good) //parent
Brother
Brother
$attrs:包含了父作用域不作为prop被识别(且获取)的特性绑定(class和style除外),就是说,他获取到的除了prop里的可以收到和元素自有属性之外的所有自定义属性$listeners:包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。
$attrs:{{$attrs["two"]}}
$attrs:{{$attrs["one"]}}
总结:可以用于传值和事件从后代组件
//main.js里 Vue.prototye.dispatch = dispatch; /** eventName 派发事件名称 data 派发的数据 **/ function dispatch(eventName,data){ let parent = this.$parent while(parent){ parent.$emit(eventName,data) parent = parent.$parent; } }
后代组件
{{msg}}
祖组件
main.js
class Bus{ constructor(){ this.callbacks = {} } $on(name,fn){ this.callbacks[name] = this.callbacks[name] || [] this.callbacks[name].push(fn) } $emit(name,args){ if(this.callbacks[name]){ this.callbacks[name].forEach(cb=>cb(args)) } } } Vue.prototype.$bus = new Bus()
A组件
{{msg}}
B组件
最后一种使用Vuex,但vuex比较大,后续会跟上,敬请期待
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/106907.html
摘要:我们需要在里改动一下代码首先就是绑定一个自定义事件再增加然后在中变成就是触发父组件中的方法所以,触发了父组件的函数,改变了父组件的的值,父组件再通过传值给子组件。从而实现数据传递,父子组件通信。 一、vue的父子组件之间是如何传值的? 首先呢,需要说说的是,vue既然有双向绑定,那为何会有父子组件之间的传值问题?这个问题也简单,vue的组件会供其他的vue页面进行调用,如果数组都是双...
摘要:最近有时间,整理一下的知识点,很多都是面试常见的的生命周期如果你能理解了这张图,也就对的生命周期有了一个大致的了解。创建前后在阶段,实例的挂载元素还没有。模式下,前端的必须和实际向后端发起请求的一致,如。 最近有时间,整理一下Vue的知识点,很多都是面试常见的 1、Vue的生命周期 如果你能理解了这张图,也就对Vue的生命周期有了一个大致的了解。 showImg(https://s...
摘要:我的个人博客地址资源地址非父子组件传值,事件总线的使用方式我的博客地址如果您对我的博客内容有疑惑或质疑的地方,请在下方评论区留言,或邮件给我,共同学习进步。 欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 先说一下什么是事件总线,其实就是订阅发布者模式; 比如有一个bus对象,这个对象上有两个方法,一个是on(监听,也就是订阅),一个是emit(触发,也就...
摘要:子传父想要子传父,通过子组件控制父组件方法,进而让父组件的方法自己改变自己的明确父组件绑定的上内容作用域都属于父组件的,因此传值的都是父组件的或者例如下面的案例,首先和中左面都是子组件的接受的变量值,右面都有可能是父组件或者传值简单 vue 子传父 1.想要子传父,通过子组件控制父组件方法,进而让父组件的方法自己改变自己的data 2.明确父组件绑定的dom上内容作用域都属于父组件的,...
摘要:发明了,利用语法来创建虚拟。然而,对持久化实例的缺乏也意味着函数式组件不会出现在的组件树里。这个很有用,当你在父组件给子组件绑定事件时就需要这个了。之前考虑过用动态组件来切换,但是放弃了,因为没有直观啊。另外推荐大家多用函数式组件提高性能。 什么是JSX? JSX就是Javascript和XML结合的一种格式。React发明了JSX,利用HTML语法来创建虚拟DOM。当遇到{ ...
阅读 1481·2019-08-30 15:44
阅读 1945·2019-08-30 14:07
阅读 2871·2019-08-30 13:56
阅读 2336·2019-08-29 17:06
阅读 1323·2019-08-29 14:13
阅读 2078·2019-08-29 11:28
阅读 3223·2019-08-26 13:56
阅读 1940·2019-08-26 12:11