vueピットチュートリアル(3)vue親子コンポーネント間の相互呼び出し方法と相互伝達データ

1.親コンポーネントが子コンポーネントを呼び出す方法
親コンポーネント:

<span style="color:#000000;">
    import Child1 from </span>'./child1'<span style="color:#000000;">;
    export </span><span style="color:#0000ff;">default</span><span style="color:#000000;"> {
        name: </span>"parent"<span style="color:#000000;">,
        components: {
            child1: Child1
        },
        methods: {
            clickParent() {
                </span><span style="color:#008000;">//</span><span style="color:#008000;"> this.$refs.child1.$emit('click-child', "high");</span>
                <span style="color:#0000ff;">this</span>.$refs.child1.handleParentClick("ssss"<span style="color:#000000;">);
            }
        }
    }
</span>

サブアセンブリ:

<span style="color:#000000;">
    export </span><span style="color:#0000ff;">default</span><span style="color:#000000;"> {
        name: </span>"child1"<span style="color:#000000;">,
        props: </span>"msg"<span style="color:#000000;">,
        methods: {
            handleParentClick(e) {
            }
        }
    }
</span>

 
2、子コンポーネントが親コンポーネントを呼び出す方法
親コンポーネント:

<span style="color:#000000;">
import ..</span>/components/action  <span style="color:#008000;">//</span><span style="color:#008000;">     </span>
export <span style="color:#0000ff;">default</span><span style="color:#000000;">{
    components:{
        cp_action
    },
    method:{
        macSelect(){
            </span><span style="color:#008000;">//</span><span style="color:#008000;">   </span>
            alert(123<span style="color:#000000;">)；
        }
    }
}
</span>

サブアセンブリ:

<span style="color:#000000;">
    export </span><span style="color:#0000ff;">default</span><span style="color:#000000;">{
      methods: {
          childMethod() {
              console.log(</span>'       '<span style="color:#000000;">);
              </span><span style="color:#0000ff;">this</span>.$emit('parentMethod');  <span style="color:#008000;">//</span><span style="color:#008000;">  $emit()         </span>
<span style="color:#000000;">          }
      },
    }
</span>

 
3、親コンポーネントがサブコンポーネントにデータを渡す(props属性で実現可能)
親コンポーネント:
 
転載先:https://www.cnblogs.com/wangming1002/p/9172303.html