在vue中如何實作父元件向子元件傳遞數據

這篇文章主要介紹了vue父元件向子元件(props)傳遞資料的方法,文中給大家補充介紹了vue父子元件間傳值(props)的實作程式碼，需要的朋友可以參考下

vue頁面結構

在做專案的時候常常有這樣的一個情況，這個頁面的資料（例如：id號）要帶到另一個頁面去查詢某個資料的詳情等，傳統的作法不是在url上加參數，cookie或是現在H5的「sessionStorage」和「localStorage」上賦值，這是頁面之間傳遞的方法。

隨著Angularjs,React,Vue的流行元件式的開發方式成為另一個不錯的解決方案。

最近就有一些小夥伴問我，vue元件之間是如何傳遞參數的？其實vue是有三種方式可以元件之間傳遞資料（props，元件通信，slot），這次就說第一種方式如下：

a父元件內容：

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

components: {'b-p': b} // 注册，只能在当前a组件里使用
<b-p :propsname=&#39;datas(向子组件传递的参数)&#39;></b-p>

b子元件內容：

<template> <p>{{propsname}}</p> </template>
export default{
props: [&#39;propsname&#39;],
data(){}
}

只要在a元件中的datas的值一直在改變，在b子元件中props就會即時監聽propsname的變化，在頁面上也會做出對應的渲染，使用方式也是{{propsname}}。

PS：以下跟大家介紹下vue父子元件間傳值(props)

先定義一個子元件，在元件中註冊props

<template>
  <p>
    <p>{{message}}(子组件)</p>
  </p>
</template>
<script>
export default {
  props: {
    message: String //定义传值的类型<br>  }
}
</script>
<style>
</style>

在父元件中，引入子元件，並傳入子元件內所需的值

<template>
  <p>
    <p>父组件</p>
    <child :message="parentMsg"></child> 
  </p>
</template>
<script>
import child from &#39;./child&#39; //引入child组件
export default {
  data() {
      return {
        parentMsg: &#39;a message from parent&#39; //在data中定义需要传入的值
      }
    },
    components: {
      child
    }
}
</script>
<style>
</style>

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

上面是我整理給大家的，希望未來會對大家有幫助。

相關文章：

layui中有關取值傳值方面的問題

#使用JavaScript如何實作抽獎系統

詳細解答vue的變化對元件有什麼影響？

使用Parcel如何包裝

#

以上是在vue中如何實作父元件向子元件傳遞數據的詳細內容。更多資訊請關注PHP中文網其他相關文章！