<section id="app">
  <ul>
    <li>
      <h3>v-model类型：</h3>
      <p @click="mval = '点p有惊喜'">{{mval}}</p>
      <x-vmodel v-model="mval"></x-vmodel>
      <x-vmodel2 v-model="mval" mval2="可以修改事件类型"></x-vmodel2>
    </li>
    <li>
      <h3>sync类型：</h3>
      <p @click="sval = '点p有惊喜'">{{sval}}</p>
<!--       <x-sync v-bind:sval.sync="sval"></x-sync> -->
      <x-sync :sval="sval" @update:sval="childVal => sval = childVal"></x-sync>
      <x-sync :sval.sync="sval"></x-sync>
    </li>
  </ul>
</section>

Vue.component("x-vmodel", {
  props: ['value'],// v-model 接收的值默认以value定义
  template: `
  <div>
      <button @click="$emit('input', '按钮触发dei')">按钮触发v-model</button>---
      <input :value="value" @input="$emit('input', $event.target.value)" >---
      值变化:{{value}}
  </div>
  `
})

Vue.component("x-vmodel2", {
  model: {
    prop: 'myval',
    event: 'abc'
  },
  props: ['myval', 'mval2'],
  template: `
  <div>
      <button @click="$emit('abc', '按钮触发dei')">{{mval2}}</button>---
      <input :value="myval" @input="$emit('abc', $event.target.value)" >---
      值变化:{{myval}}
  </div>
  `
})

Vue.component("x-sync", {
  props: ['sval'],
  methods: {
    hanldeInput(e) {
      this.$emit("update:sval", '按钮触发的')
      // console.log(e.target.value)
    }
  },
  template: `
    <div>
      <button @click="hanldeInput">我也能按钮触发</button>---
      <input :value="sval" @input="$emit('update:sval', $event.target.value)" />---
      值变化:{{sval}}
    </div>
  `
})

new Vue({
  el: "#app",
  data: {
    mval: "modelVal",
    sval: "syncVal"
  }
})