Vue的props，子節點，獲取父節點的數據的一個方式

vue的參數里面有一個props, 它是子節點，獲取父節點的數據的一個方式

 

先看看father.vue,在這里，有一個子節點，是使用自定義的組件child.vue,這個組件的節點名叫Children,里面有一個參數fatherName綁定了name參數，當data()里面的name參數被改變，這里的fatherName會跟着改變，接下來看看child.vue

 

father.vue

<template>
    <div>
        <!--子節點，這里的fatherName 跟 name做了綁定-->
        <Children :fatherName="name"></Children>
    </div>
</template>

<script>
    import Child from './child.vue'
    export default{
        data(){
          return{
              name:'John'
          }
        },
        components:{
          Children:Child
        }
    }


</script>

 

在child.vue組件當中，我們定義了一個按鈕，點擊之后會從父節點中獲取fatherName,但這里必須注意的是，必須要引用父節點的參數，這里才會正常獲取到，這里就需要用到props，通過在這里定義了與父節點中一直的參數名，自然在這里就能獲取到了

child.vue 

<template>
    <div>
        <!--測試效果的按鈕-->
        <button @click="test()">Test Ref</button>
    </div>
</template>

<script>
    export default{
        props:['fatherName'],
        methods:{
            test(){
                console.log(this.fatherName)
            }
        }
    }

</script>