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

geekzhou 发布于2019-08-21 17:04 / 3114人阅读

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

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

10.1 Vue组件化

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。

组件A写法：

组件B写法：

在父组件component
分别引用挂载

10.2组件间传值

对于简单的父子组件或是同属同一父组件的兄弟组件之间的通信，vue提供了方法,没必要用到vuex

10.2.1 父组件向子组件传值：

父组件：

     //logoMsg是父组件data里的值

子组件：

   
   ...
   data(){

   }
   props:["logo"],
   ...

10.2.2子组件调用父组件方法并向父组件传值：

父组件：

   
   
   ...
    methods:{
         componenta:function(data){ //data就是子组件传递过来的值
            this.data1 = data
         }
     }

子组件：

     methods:{
        toParent:function(){
            this.$emit("toParent",this.data1) //调用父组件toParent方法，并传递参数
        }
    }

效果图：

兄弟组件之间传值:在B组件修改父组件数据时。选择修改传给A组件的数据即可。

效果图：

10.2.3事件总线：不相关组件之间传递数据

bus.js文件：

   import Vue from "vue"
   export default new Vue()

组件B $emit触发事件:

  import Bus from "./bus.js" 
  ...  
   byBus:function(){
           Bus.$emit("byBus",this.byBusData)
        }

组件A $on接受事件传递数据

    ...
    data(){
    },
    created(){
       Bus.$on("byBus",(data)=>{
           this.busData = data
       })
    },

效果图：

更复杂的数据传递就要用到vuex 代码托管于github 欢迎star

GPU云服务器云服务器 vue2.0 cdn 从0到1搭建视频通话系统从0开始到1千万用户 vue组件

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

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

Vue 组件间传值

摘要：前言作为现在比较火的框架之一，相信您在使用的过程中，也会遇到组件间传值的情况，本文将讲解几种组件间传值的几种方法，跟着小编一起来学习一下吧实现注意学习本文，需要您对有一定的了解。为了便于讲解，以下方法均假设父组件是，子组件是，兄弟组件是。前言 Vue 作为现在比较火的框架之一，相信您在使用的过程中，也会遇到组件间传值的情况，本文将讲解几种 Vue 组件间传值的几种方法，跟着小编一起来...

VishKozus 2019-08-23 15:07 评论0 收藏0
Vue2从0到1(五)：使用nodejs+koa2和axios实现前后台数据通信

摘要：前面讲了环境的搭建用打包的使用的使用以及组件化及组件间传值下面讲一下使用提供接口，访问接口，前后端数据通信的相关内容。前面讲了环境的搭建用webpack打包vue,Vue-router,vuex的使用的使用以及Vue组件化及组件间传值下面讲一下使用nodejs+koa提供接口，axios访问接口，前后端数据通信的相关内容。 11.使用nodejs+koa2提供后台接口 npm i...

legendmohe 2019-08-21 17:27 评论0 收藏0
vue 组件间传值

摘要：父组件给子组件传值父组件二哈子组件子组件给父组件父组件子组件点击啦啦啦啦定义状态中引入传值取值地址传值 1、父组件给子组件传值父组件： import child from ./child.vue export default { components: {child}, data(){ return {name:二哈} } ...

sourcenode 2019-08-23 14:02 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0