vue组件封装及父子组件传值,事件处理

hikui 发布于2019-08-23 14:39 / 3409人阅读

摘要：开发中把有统一功能的部分提取出来作为一个独立的组件在需要使用的时候引入可以有效减少代码冗余难点在于如果封装使用如何传参派发事件等我会采取倒叙的方式进行说明本文总结于实战解密一书代码如下封装组件更多要向组件输入数据就不能用来作为数据容器

vue开发中,把有统一功能的部分提取出来,作为一个独立的组件,在需要使用的时候引入,可以有效减少代码冗余.
难点在于如果封装,使用,如何传参,派发事件等,我会采取倒叙的方式进行说明.
(本文总结于Vue2实战解密一书)
代码如下:
封装组件BookList.vue

要向组件输入数据就不能用data来作为数据容器了,因为data是一个内部对象,此时要换成props
我们可以这样理解:
    data的作用域是仅仅适用于内部,而对于外部是不可见的,props是内部外部都可见,是一个公共的组件成员变量.

Home.vue 组件代码如下:

混合云私有云 vue父子组件通讯父子组件父子组件通信父子组件通讯

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

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

Vue2从0到1(四)：Vue组件化及组件间传值

摘要：前面讲了环境的搭建用打包和的使用以及的使用下面讲一下组件化及组件间传值主要包括父子组件间传值，兄弟组件间传值，不相关组件间传值。组件化及组件间传值组件化组件是最强大的功能之一。前面讲了环境的搭建用webpack打包vue和Vue-router的使用以及vuex的使用下面讲一下Vue组件化及组件间传值：主要包括父子组件间传值，兄弟组件间传值，不相关组件间传值。 10.Vue组件...

geekzhou 2019-08-21 17:04 评论0 收藏0
vue -- 非父子组件传值，事件总线（eventbus）的使用方式

摘要：我的个人博客地址资源地址非父子组件传值，事件总线的使用方式我的博客地址如果您对我的博客内容有疑惑或质疑的地方，请在下方评论区留言，或邮件给我，共同学习进步。欢迎访问我的个人博客：http://www.xiaolongwu.cn 前言先说一下什么是事件总线，其实就是订阅发布者模式；比如有一个bus对象，这个对象上有两个方法，一个是on（监听，也就是订阅），一个是emit（触发，也就...

zone 2019-08-23 14:37 评论0 收藏0
Vue 父子传值与子父传值

摘要：子实例可以用访问父实例，子实例被推入父实例的数组中。节制地使用和它们的主要目的是作为访问组件的应急方法。更推荐用和实现父子组件通信我是父组件中的数据我是我是号组件我是利用props父子传值父组件，可以在引用子组件的时候，通过属性绑定（v-bind:）的形式, 把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用创建 Vue 实例，得到 Vie...

aisuhua 2019-08-23 17:14 评论0 收藏0
vue组件间通信六种方式（完整版）

摘要：本文总结了组件间通信的几种方式，如和，以通俗易懂的实例讲述这其中的差别及使用场景，希望对小伙伴有些许帮助。状态改变提交操作方法。前言组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：showImg(https://segmentfault.com/img/remote/146000001...

frontoldman 2019-08-26 13:48 评论0 收藏0
vue组件间通信六种方式（完整版）

摘要：本文总结了组件间通信的几种方式，如和，以通俗易懂的实例讲述这其中的差别及使用场景，希望对小伙伴有些许帮助。状态改变提交操作方法。前言组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系： showImg(https://user-gold-cdn.xitu.io/2019/5/17/16ac35bf...

DDreach 2019-05-21 16:37 评论0 收藏0