Vueのprops、サブノード、親ノードのデータを取得する方法

vueのパラメータにはpropsがあります.これはサブノードで、親ノードのデータを取得する方法です.
 
まず見てみろvue,ここでは,カスタムコンポーネントchildを用いるサブノードがある.vue、このコンポーネントのノードの名前はChildrenで、中にはパラメータfatherNameがnameパラメータをバインドしています.data()の中のnameパラメータが変更されると、ここのfatherNameが変更されます.次にchildを見てみましょう.vue
 
father.vue

<span style="color:#000000;">
    import Child from </span>'./child.vue'<span style="color:#000000;">
    export </span><span style="color:#0000ff;">default</span><span style="color:#000000;">{
        data(){
          </span><span style="color:#0000ff;">return</span><span style="color:#000000;">{
              name:</span>'John'<span style="color:#000000;">
          }
        },
        components:{
          Children:Child
        }
    }


</span>

 
childでvueコンポーネントでは、クリックすると親ノードからfatherNameが取得されるボタンを定義していますが、ここで注意しなければならないのは、親ノードのパラメータを参照しなければなりません.ここで正常に取得できません.ここではpropsが必要です.ここで親ノードとのパラメータ名を定義することで、自然にここで取得できます.
child.vue 

<span style="color:#000000;">
    export </span><span style="color:#0000ff;">default</span><span style="color:#000000;">{
        props:[</span>'fatherName'<span style="color:#000000;">],
        methods:{
            test(){
                console.log(</span><span style="color:#0000ff;">this</span><span style="color:#000000;">.fatherName)
            }
        }
    }

</span>

 
転載先:https://www.cnblogs.com/oscar1987121/p/9604921.html