vue中父組件向子組件傳值

通過 Prop 向子組件傳遞數據

首先，准備好父組件要傳遞的數據

var vm = new Vue({
　　 el: '#app',
    data: {
    msg: '父組件向子組件傳遞數據啦！'　　　　//父組件要傳遞的數據
   }
})

通過子組件綁定屬性的方式，傳遞數據

<div id="app">
   <row :send-data="msg"></row>
</div>

子組件通過prop獲取傳遞過來的數據

Vue.component('row',{
    template: '<div>{{sendData}}</div>',
    props: {
            sendData: String　　　　　　//也可以以字符串數組形式列出的 prop，如  props:['sendData']
           }
   })

 

主意：HTML 中的特性名是大小寫不敏感的，所以瀏覽器會把所有大寫字符解釋為小寫字符。這意味着當你使用 DOM 中的模板時，camelCase (駝峰命名法) 的 prop 名需要使用其等價的 kebab-case (短橫線分隔命名)