2023-05-02 Vue组件、全局事件总线

一、使用组件步骤(创建、注册、使用)


1.创建组件(注意:组件里面的template还是只能有一个根标签)

Vue.extend({})得到的是一个VueComponent构造函数,由new这个构造函数得到vc对象

2.注册组件

3.使用组件

二、组件嵌套

1.创建root组件,在root下创建x组件和y组件,在x下创建x1组件

三、单文件组件(用这种)

每一个组件单独定义一个.vue的文件

main.js:将vm实例放到这里

四、组件自定义事件

1.子向父传递数据,父绑定,子触发

2.自定义事件event1

绑定方式一:

绑定方式二:

2.在子组件中添加点击事件,然后执行父组件中的自定义事件

五、解绑事件

六、全局事件总线(在父组件mounted里面绑定事件)

父组件:在mounted钩子函数里面绑定事件:this.$bus.$on('事件名', 要执行的方法名)

子组件:给一个按钮,点击后触发事件里面:this.$bus.$emit('事件名',参数),参数个数不限

说明:

就是要构建一个全局的vc对象,专门用来处理绑定事件和触发事件,为了让所有的组件都能访问到,所以要将这个全局事件总线vc对象赋值给Vue原型对象的一个属性上,这样,每个vc对象都能用   vc.属性    来拿到这个全局vc对象了,再用来处理绑定和触发事件

触发事件:

绑定事件:

重要:因为vm实例也有$on和$emit方法,所以可以在vm刚好创建出来的时候,将vm赋值给Vue原型对象的$bus属性上,$bus用来表示全局事件总线

触发事件:

绑定事件:

七、总结:

组件之间数据传递方式

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 组件是Vue.js强大的功能之一,而组件实例的作用域是相互独立的,那么在开发的过程中,组件与组件之间肯定是相互联系...
    PingerL阅读 136评论 0 0
  • 认识组件 组件化开发: ​ 将一个完成的页面,划分成一个个的组件,最终由一个个组件来完成整个页面你的开发,这个...
    cj_jax阅读 192评论 0 1
  • 前言 在工作中经常会用到Vue,包括也会用到很多重要的点例如组件化等等,现在也想对于之前的应用和学习做一个小小的总...
    羊驼驼驼驼阅读 455评论 0 2
  • 前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引...
    用技术改变世界阅读 2,205评论 1 3
  • 此笔记是我在拉勾学习课程过程中的总结,文字原创,笔记里很多技巧和知识是老师总结的,如果有侵权,请联系本人! 组件化...
    你好肥猫阅读 538评论 0 2