구성 요소와 이야기하기 부모와 자녀의 부모 vue.js

Question

나는 각성적인 생각에서 왔으며 지금은 vue.js를 배우려고합니다. 나는 webpack을 사용하고 있으며 다음 세 개의 .vue 클래스가 있습니다. CounterDisplay.vue, IncrementButton.vue , and App.vue . I want to increment the 카운트 variable but all it does is console.log how many times I pressed the button. I am trying to figure out how child to parent and parent to child work in vue. Then I need to figure out the correct pattern to use vue in a very large application. In angular you have a 모듈 and in there you put your components and services etc. How does vue` do this?

CounterDisplay.vue

<template> 
    <div id="#counterDisplay"> 
    {{count}} 
    </div> 
</template> 

<script> 
    export default { 
    data() { 
     return { 
     count: 0 
     } 
    } 
    } 
</script> 

<style scoped> 

</style> 

IncrementButton.vue

<template> 
    <button @click.prevent="active">+1</button> 
</template> 

<script> 
    export default { 
     methods: { 
     active() { 
      console.log('+1 Pressed') 
     } 
     } 
    } 
</script> 

<style scoped></style> 

App.vue

<template> 
    <div id="app"> 
    <h3>Increment:</h3> 
    <increment></increment> 
    <h3>Counter:</h3> 
    <counter></counter> 
    </div> 
</template> 

<script> 
    import Counter from './components/CounterDisplay.vue' 
    import Increment from './components/IncrementButton.vue' 
    export default { 
    components: { 
     Counter, 
     Increment 
    } 
    } 
</script> 

<style> 
</style> 

Answer 1

당신이 말했듯이 :

이 출력입니다. 나는 아이에게 부모와 부모의 자녀가 당신이 그것을 어떻게 이것은

작동하는 방법을 알아 내려고 노력하고 있어요 :

1. 는 App.vue
2. 방출 에 counter 데이터 속성을 설정 vm.$emit()에서 IncrementButton.vue 모든 버튼 클릭시 구성 요소 클릭
3. 이 구성 요소에 이벤트 수신기를 설정하고 increment을 실행하십시오. 이러한 이벤트가 발생한 경우
4. 방출 될 때마다 방법 1
5. 의해 카운터를 증가 방법 다시 호출 소품으로 대향 속성을 보내 **** CounterDisplay.vue **

* 응용 프로그램. VUE **

<template> 
    <div id="app"> 
    <h3>Increment:</h3> 
    <increment @btn-clicked="increaseCounter"></increment> 
    <h3>Counter:</h3> 
    <counter :counter="counter"></counter> 
    </div> 
</template> 

<script> 
    import Counter from './components/CounterDisplay.vue' 
    import Increment from './components/IncrementButton.vue' 
    export default { 
     data(){ 
      counter:0 
     }, 
    components: { 
     Counter, 
     Increment 
    }, 
    methods:{ 
     increaseCounter(){ 
      this.counter ++; 
     } 
    } 
    } 
</script> 

<style> 
</style> 

IncrementButton.vue

<template> 
    <button @click.prevent="active">+1</button> 
</template> 

<script> 
    import {EventBus} from './path/to/main.js' 
    export default { 
     methods: { 
     active() { 
      console.log('+1 Pressed') 
      //emitting an event 
      this.$emit('btn-clicked'); 
     } 
     } 
    } 
</script> 

<style scoped></style> 

CounterDisplay.vue

<template> 
    <div id="#counterDisplay"> 
    {{counter}} 
    </div> 
</template> 

<script> 
    export default { 
     props:['counter'], 
    data() { 
     return { 
     } 
    }, 
    } 
</script> 

<style scoped> 

</style> 

--------------------

두 성분은 비 친자 성분이므로 간단한 시나리오는 EventBus

메인에있는 빈 Vue 인스턴스에 지나지 않는 EventBus를 선언하십시오.JS이 빈 VUE 인스턴스의 유일한 초점 설정이 btn-clicked 이벤트에 대한 리스너에서 지금 듣고 구성 요소

에서 이벤트에 응답 할 수

<template> 
    <button @click.prevent="active">+1</button> 
</template> 

<script> 
    import {EventBus} from './path/to/main.js' 
    export default { 
     methods: { 
     active() { 
      console.log('+1 Pressed') 
      //emitting an event 
      //Syntax is EventBus.$emit('event-name', eventData); 
      EventBus.$emit('btn-clicked', 1); 
     } 
     } 
    } 
</script> 

<style scoped></style> 

IncrementButton.vue입니다

export const EventBus = new Vue(); 

파일 만든 후크 8 * CounterDisplay.vue **

<template> 
    <div id="#counterDisplay"> 
    {{count}} 
    </div> 
</template> 

<script> 
    import {EventBus} from './path/to/main.js' 
    export default { 
    data() { 
     return { 
     count: 0 
     } 
    }, 
    created(){ 
     EventBus.$on('btn-clicked', (eventData) => { 
      this.count = this.count + eventData; 
     }); 
    } 
    } 
</script> 

<style scoped> 

</style> 

참고 : 대형 앱의 올바른 패턴을 알고 싶다면 vuex