這篇文章主要介紹了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='datas(向子组件传递的参数)'></b-p>b子元件內容：
<template> <p>{{propsname}}</p> </template>
export default{
props: ['propsname'],
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 './child' //引入child组件
export default {
data() {
return {
parentMsg: 'a message from parent' //在data中定义需要传入的值
}
},
components: {
child
}
}
</script>
<style>
</style>這種方式只能由父向子傳遞，子元件不能更新父元件內的data
上面是我整理給大家的，希望未來會對大家有幫助。
相關文章：
#以上是在vue中如何實作父元件向子元件傳遞數據的詳細內容。更多資訊請關注PHP中文網其他相關文章！
