student-client/tests/vue/event.vue

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

    <div>
      <Child @count-change="childListener" />
      <div>{{ globalCount }}</div>
    </div>

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

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

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