欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue父組件向子組件(props)傳遞數(shù)據(jù)的方法

 更新時間:2018年01月02日 09:39:20   投稿:mrr  
這篇文章主要介紹了vue父組件向子組件(props)傳遞數(shù)據(jù)的方法,文中給大家補充介紹了vue父子組件間傳值(props)的實現(xiàn)代碼,需要的朋友可以參考下

 

vue頁面結構

在做項目的時候常常有這樣的一個情況,這個頁面的數(shù)據(jù)(比如:id號)要帶到另一個頁面去查詢某個數(shù)據(jù)的詳情等,傳統(tǒng)的作法不是在url上加參數(shù),cookie或者是現(xiàn)在H5的“sessionStorage”和“l(fā)ocalStorage”上賦值,這是頁面之間傳遞的方法。

隨著Angularjs,React,Vue的流行組件式的開發(fā)方式成為另一種不錯的解決方案。

最近就有一些小伙伴問我,vue組件之間是如何傳遞參數(shù)的?其實vue是有三種方式可以組件之間傳遞數(shù)據(jù)(props,組件通信,slot),這次就說第一種方式如下:

a父組件內容:

引入b子組件import b form 'b.vue'

components: {'b-div': b} // 注冊,只能在當前a組件里使用
<b-div :propsname='datas(向子組件傳遞的參數(shù))'></b-div>

b子組件內容:

<template> <div>{{propsname}}</div> </template>
export default{
props: ['propsname'],
data(){}
}

只要在a組件中的datas的值一直在改變,在b子組件中props就會實時監(jiān)聽propsname的變化,在頁面上也會做出相應的渲染,使用方式也是{{propsname}}。

PS:下面給大家介紹下vue父子組件間傳值(props)

先定義一個子組件,在組件中注冊props

<template>
  <div>
    <div>{{message}}(子組件)</div>
  </div>
</template>
<script>
export default {
  props: {
    message: String //定義傳值的類型<br>  }
}
</script>
<style>
</style> 

在父組件中,引入子組件,并傳入子組件內需要的值

<template>
  <div>
    <div>父組件</div>
    <child :message="parentMsg"></child> 
  </div>
</template>
<script>
import child from './child' //引入child組件
export default {
  data() {
      return {
        parentMsg: 'a message from parent' //在data中定義需要傳入的值
      }
    },
    components: {
      child
    }
}
</script>
<style>
</style> 

這種方式只能由父向子傳遞,子組件不能更新父組件內的data

總結

以上所述是小編給大家介紹的vue父組件向子組件(props)傳遞數(shù)據(jù)的方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關文章

  • Vue非父子組件通信詳解

    Vue非父子組件通信詳解

    這篇文章主要為大家詳細介紹了Vue非父子組件通信的相關資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-06-06
  • Vue props 單向數(shù)據(jù)流的實現(xiàn)

    Vue props 單向數(shù)據(jù)流的實現(xiàn)

    這篇文章主要介紹了Vue props 單向數(shù)據(jù)流的實現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-11
  • vue之瀏覽器存儲方法封裝實例

    vue之瀏覽器存儲方法封裝實例

    下面小編就為大家分享一篇vue之瀏覽器存儲方法封裝實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • vue中provide和inject的用法及說明(vue組件爺孫傳值)

    vue中provide和inject的用法及說明(vue組件爺孫傳值)

    這篇文章主要介紹了vue中provide和inject的用法及說明(vue組件爺孫傳值),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • vue項目 npm run build 打包項目防止瀏覽器緩存的操作方法

    vue項目 npm run build 打包項目防止瀏覽器緩存的操作方法

    這篇文章主要介紹了vue項目 npm run build 打包項目防止瀏覽器緩存的操作方法,本文給大家推薦兩種方法,每種方法通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下
    2022-08-08
  • Vue.js基礎知識小結

    Vue.js基礎知識小結

    本文主要介紹了Vue.js的相關知識。具有一定的參考價值,下面跟著小編一起來看下吧
    2017-01-01
  • Vue讀取本地靜態(tài)文件json的2種方法以及優(yōu)缺點

    Vue讀取本地靜態(tài)文件json的2種方法以及優(yōu)缺點

    這篇文章主要介紹了Vue讀取本地靜態(tài)文件json的2種方法以及優(yōu)缺點說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • django+vue項目搭建實現(xiàn)前后端通信

    django+vue項目搭建實現(xiàn)前后端通信

    本文主要介紹了django+vue項目搭建實現(xiàn)前后端通信,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-02-02
  • Vue中的v-model,v-bind,v-on的區(qū)別解析

    Vue中的v-model,v-bind,v-on的區(qū)別解析

    vue.js是一套構建用戶界面的框架,只關注視圖層,它不僅易于上手,還便于與第三方庫或既有項目整合,vue.js有配套的第三方類庫,可以整合起來做大型項目的開發(fā),這篇文章主要介紹了v-model,v-bind,v-on的區(qū)別,需要的朋友可以參考下
    2022-12-12
  • Vue3中集成高德地圖并實現(xiàn)平移縮放功能

    Vue3中集成高德地圖并實現(xiàn)平移縮放功能

    隨著前端技術的不斷發(fā)展,地圖應用在我們的項目中越來越常見,本文將介紹如何在Vue3項目中集成高德地圖,并通過簡單的配置實現(xiàn)地圖的平移和縮放功能,需要的朋友可以參考下
    2024-09-09

最新評論