vue實現(xiàn)組件之間傳值功能示例

更新時間：2018年07月13日 14:42:56 作者：哼著自己的小調(diào)調(diào)

這篇文章主要介紹了vue實現(xiàn)組件之間傳值功能,結(jié)合實例形式分析了vue.js父子組件之間相互傳值常見操作技巧,需要的朋友可以參考下

本文實例講述了vue實現(xiàn)組件之間傳值功能。分享給大家供大家參考，具體如下：

slot標(biāo)簽：

想向封裝好結(jié)構(gòu)的組件中插入內(nèi)容，需要借助<slot></slot>

在組件之中進(jìn)行關(guān)聯(lián)：如

模板中：

<slot name='txt'></slot>

組件調(diào)用中：

<p slot='txt'></p>

注：如果只有slot上面每一定義name屬性，則只能有一個slot

<div class='box'>
  <com>
    <p slot='txt'></p>
  </com>
</div>
<template id="c">
  <div>
    <slot name="txt"></slot>
  </div>
</template>

Vue.component('com',{
  template:"#c"
})

父組件向子組件傳值：props

父組件：

<template>
  <child :parent-msg='a'></child>
</template>

子組件：

child：{
  template：'#chi'
  props：['parentMsg']
}

子組件向父組件的傳值：

vue只運行數(shù)據(jù)的單選傳遞，在子組件向父組件的傳值中，需要事件觸發(fā)

子組件：

<template>
  <div @click="up"></div>
</template>

methods:{
 up(){
  this.$emit('fn','msg') // 主動觸發(fā)fn方法，msg是需要傳遞的數(shù)據(jù)
 }
}

父組件：

<div>
  <child @fn="getval"></child>
</div>

methods:{
  getval(msg){ // msg接收到的數(shù)據(jù)
    this.msg=msg
  }
}

希望本文所述對大家vue.js程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

vue?實現(xiàn)列表跳轉(zhuǎn)至詳情且能添加至購物車功能
列表頁面顯示數(shù)據(jù)，點擊跳轉(zhuǎn)到對應(yīng)的詳情頁，詳情頁可以添加并跳轉(zhuǎn)到購物車，購物車具有常見功能，這篇文章主要介紹了vue?實現(xiàn)列表跳轉(zhuǎn)至詳情且能添加至購物車,需要的朋友可以參考下
2022-10-10
Vue引入ElementUI并使用的詳細(xì)過程
Element UI是一個基于Vue 2.0的桌面端組件庫,旨在構(gòu)建簡潔、快速的用戶界面,這篇文章主要介紹了Vue如何引入ElementUI并使用,需要的朋友可以參考下
2024-06-06
解決vue elementUI 使用el-select 時 change事件的觸發(fā)問題
這篇文章主要介紹了解決vue elementUI 使用el-select 時 change事件的觸發(fā)問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
基于vue實現(xiàn)頁面滾動加載的示例詳解
頁面內(nèi)容太多會導(dǎo)致加載速度過慢,這時可考慮使用滾動加載即還沒有出現(xiàn)在可視范圍內(nèi)的內(nèi)容塊先不加載,出現(xiàn)后再加載,所以本文給大家介紹了基于vue實現(xiàn)頁面滾動加載的示例,需要的朋友可以參考下
2024-01-01
解決element?ui?cascader?動態(tài)加載回顯問題
這篇文章主要介紹了element?ui?cascader?動態(tài)加載回顯問題解決方法,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-08-08
vue.js編譯時給生成的文件增加版本號
這篇文章主要介紹了vue.js編譯時給生成的文件增加版本號，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09
Vue+ssh框架實現(xiàn)在線聊天
這篇文章主要為大家詳細(xì)介紹了Vue+ssh框架實現(xiàn)在線聊天，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-06-06
VUE側(cè)邊導(dǎo)航欄實現(xiàn)篩選過濾的示例代碼
本文主要介紹了VUE側(cè)邊導(dǎo)航欄實現(xiàn)篩選過濾的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
詳解Vue微信授權(quán)登錄前后端分離較為優(yōu)雅的解決方案
這篇文章主要介紹了詳解Vue微信授權(quán)登錄前后端分離較為優(yōu)雅的解決方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-06-06
vue自定義封裝指令以及實際使用
市面上大多數(shù)關(guān)于Vue.js自定義指令的文章都在講語法,很少講實際的應(yīng)用場景和用例,下面這篇文章主要給大家介紹了關(guān)于vue自定義封裝指令以及實際使用的相關(guān)資料,需要的朋友可以參考下
2022-01-01