vue2中component父子組件傳遞數據props的使用

子組件使用父親傳過來的數據，我們需要通過子組件的 props 選項。

組件實例的作用域是孤立的，不能在子組件的模板內直接引用父組件的數據。修改父親傳過來的props數據的時候 父親必須傳遞對象，否則不能修改。

現在是傳遞對象的語法 app.vue（父組件）:

<style scoped lang='stylus'>

</style>
<template>
    <div>
        <h1>我是app組件</h1>
        <zujian :data="data"></zujian>
    </div>
</template>
<script> import zujian from './components/zujian.vue' export default{ data(){ return{  data:{ a:1 } } }, components:{ zujian } } </script>

zujian.vue（子組件）：

<template>
    <div>
        <h1>{{data.a}}</h1>
        <button @click="jia">+</button>
    </div>
</template>
<script> export default{  props:["data"], // 父親傳 誰用誰接受（兒子接受） data(){ return{ } }, methods:{ jia(){ console.log(this.data); this.data.a++； } } } </script>