vue.js에서 부모 템플릿의 함수를 호출하십시오.

Question

아래와 같이 부모 컴포넌트 템플릿에 버튼이 있습니다.

<template> 
     <div class="data_table"> 
      <button class="mini ui button" @click="show">     
     </div> 
    </template> 

이 show()은

<script> 
    export default { 
     data: 
      function() { 
       return { 
        value: this.active1 
       } 
      }, 
     props: { 
      active1: true 
     },   
     methods: { 
      show() { 
       this.active1 = true 
      } 
     }, 
    } 
</script> 

가 어떻게 show() 기능 있음을 호출 할 수 있습니다 아래처럼 아이 컴퍼넌트에 보관?

나는 vue-cli을 사용하고 있습니다.

감사

Answer 1

하위 구성 요소

<template> 
<div class="data_table"> 
    <button class="mini ui button" @click="show">     
</div> 
</template> 


data: => ({ 
value: this.active1 
}), 
props: { 
active1: { 
    type: Boolean 
} 
}, 
methods: { 
    show() { 
    this.$emit('someEventName') 
    } 
} 

부모 구성 요소

<template> 
    <child-component 
     :active1="booleanValue" 
     @someEventName="show" 
    /> 
</template> 


data: => ({ 
booleanValue: false 
}), 
method: { 
show() { 
    this.booleanValue = true 
} 
}