student-client/tests/vue/event.vue

<template>
  <div>
    test - {{name}}

    <div>
      <Child @countChange="childListener" />
      <div>
        {{globalCount}}
      </div>
    </div>

    <div>
      选择你的理想：(use v-model, :model doesn't work)
      <input type="checkbox" v-model="dreams" value="sleep"> sleeep
      <input type="checkbox" v-model="dreams" value="eat"> eeat
    </div>

    <div>
      你有多高？
      <input type="radio" name="height" v-model="height" value="-1.7cm"> 低于一米七
      <input type="radio" name="height" v-model="height" value="+1.7cm"> 高于一米七
    </div>

  </div>
</template>

<script>
import Child from "./child";
export default {
  name: "Event",
  data() {
    return {
      name: "michael",
      globalCount: 0,
      dreams: [],
      height: ""
    };
  },
  methods: {
    childListener(v) {
      console.log(v);
      this.globalCount++;
    }
  },
  components: {
    Child
  }
};
</script>