하위 구성 요소의 함수를 실행 하시겠습니까?

Question

나는 이런 식으로 HTML을 가지고 :

<div id="nav"> 
    <homenav v-on:navigation="switchNav(this.nav)" v-if="nav == 'homeNav'"></homenav> 
    <mainav v-if="nav == 'mainNav'"></mainav> 
</div> 

내 JS는 다음과 같이이다 :

<template> 
<nav class="navbar navbar-expand-md navbar-dark bg-dark"> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
     <a class="navbar-brand" href="">Website Builder</a> 
     <div class="collapse navbar-collapse" id="navbarCollapse"> 
      <ul class="navbar-nav nav-fill w-100"> 
       <li class="nav-item"> 
        <a class="nav-link" href="/#/">Create</a> 
       </li> 
       <li class="nav-item"> 
        <a v-on:click="navData" class="nav-link" href="/#/how">How</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="/#/about">About</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="/#/youtube">Videos</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="/#/login">Go to main site</a> 
       </li> 
      </ul> 
    </div> 
</nav> 
</template> 

<script> 

export default { 
    data() { 
     return { 
      nav: '' 
     } 
    }, 
    methods: { 
    navData() { 
     this.nav = 'mainNav'; 
     this.$emit('navigation'); 
     console.log(this.nav); 
     } 
    } 
} 

:

이 homenav 구성 요소의

Vue.component('homenav', Navigation); 
Vue.component('mainav', Navigation2); 

    new Vue({ 
    el: '#nav', 
    data: { 
     nav: 'homeNav' 
    }, 
    methods: { 
     switchNav: function (test) { 
      console.log(test); 
      console.log(this.nav); 
     } 
    } 
}); 

일부는 내가 원하는 것을 보여

그래서 여기에 달성하려고하는 것은 네비게이션의 동적 전환입니다. 사용자가 메인 사이트 링크로 이동을 클릭하면 nav가 homenav에서 mainav로 동적으로 변경됩니다. 그러나, 나는 그것을 성취 할 방법을 모르며 나의 시도는 위에있다. 도와주세요 ..

내가 가장 최근에 시도한대로 편집하여 자식 + 부모 기능의 로그를 관리하도록했습니다. 그것은 homeNav와 mainNav를 함께 관리합니다. 그러나 아이에게 this.nav를 전달해야 부모가 this.nav를 업데이트 할 수 있습니다. 왜냐하면 둘 다 출력 함에도 불구하고 탐색이 변경되지 않기 때문입니다.

Answer 1

이를 달성하는 가장 좋은 방법은 Vue 라우터입니다.

그러나, 당신은 라우팅없이 당신이 동적 구성 요소

<component is=""></component> 

을 함께 할 것을 수행하려는 경우 당신은 여기에 예를 볼 수 있습니다 https://jsfiddle.net/lucaskatayama/256Lo0xa/1/

앱은 버튼으로,이 <component></component> 내부의 구성 요소를 토글합니다.

선택한 구성 요소를 변경하여 스위치를 시뮬레이트합니다.