谈论组件儿童父母和孩子的父母vue.js

Question

我来自一个角度的心态，现在我想学习vue.js.我正在使用webpack，并且我有以下三个.vue类。 CounterDisplay.vue，IncrementButton.vue , and App.vue . I want to increment the count 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 module 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. 建立一个counter数据财产App.vue
2. 的Emit使用vm.$emit()的活动IncrementButton.vue每个按钮点击组件
3. 在此组件上设置事件侦听器increment并执行回叫方法通过1​​
4. 增加计数器每当这个事件被发射
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

声明一个EventBus，它只不过是你的main中的一个空Vue实例。js文件

export const EventBus = new Vue(); 

这个空VUE实例的唯一重点是聆听和组件

响应事件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 
      //Syntax is EventBus.$emit('event-name', eventData); 
      EventBus.$emit('btn-clicked', 1); 
     } 
     } 
    } 
</script> 

<style scoped></style> 

现在设置为btn-clicked事件的监听器创建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