Vue2從0到1(四)：Vue組件化及組件間傳值

geekzhou 發布于2019-08-21 17:04 / 3115人閱讀

摘要：前面講了環境的搭建用打包和的使用以及的使用下面講一下組件化及組件間傳值主要包括父子組件間傳值，兄弟組件間傳值，不相關組件間傳值。組件化及組件間傳值組件化組件是最強大的功能之一。

前面講了環境的搭建用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組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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