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模块and in there you put your components and services etc. How does vue`执行此操作？

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

正如你所说：

。我想弄清楚孩子如何做父母和父母对孩子的工作

您就是这样做的：

在 App.vue

counter

点击每个按钮，在 IncrementButton.vue 组件中使用vm.$emit()发出活动
在此组件increment上设置事件侦听器，并在发出此事件时执行该方法
在事件回叫方法中，将计数器增加1
将计数器属性作为道具发送给**** CounterDisplay.vue **

* App.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.js文件中的空Vue实例

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>

现在在8 * CounterDisplay.vue的创建钩子中设置btn-clicked事件的监听器**

<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

与组件子公司交谈父母和父母与子公司vue.js

1 个答案: