Vue 综合- 双向绑定

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

const compoent = {
  props:['value'],
  template: `
    <div>
      <input type="text" @input="handleInput" :value="value">
    </div>
  `,
  methods: {
    handleInput (e) {
      this.$emit('input', e.target.value)
    }
  }
}

new Vue({
  el: '#app',
  components: {
    compOne: compoent
  },
  data:{
    value: '123'
  },
  template:`
    <div>
      <comp-one :value="value" @input="value=arguments[0]"></comp-one>
      <comp-one :value="value" v-model="value"></comp-one>
    </div>
  `
})

// 上面两种绑定 value 值都是可以的。
// @click: 点击调用。
// @input: 一般用于监听事件，只要输入的值变化了就会调用。
// @click.native: 给vue组件绑定事件时候，必须加上native ，否则会认为监听的是来自Item组件自定义的事件。
// @click.native.prevent 中的 prevent 是用来阻止默认的 ，相当于原生的event.preventDefault()
// @click.stop: 阻止点击事件继续传播(https://www.cnblogs.com/limengyao/p/9267254.html)

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

const compoent = {
  model:{
    prop: 'value1',
    event: 'change'
  },
  // props:['value', 'value1'],
  props:['value1'],
  template: `
    <div>
      <input type="text" @input="handleInput" :value="value1">
    </div>
  `,
  methods: {
    handleInput (e) {
      this.$emit('change', e.target.value)
    }
  }
}

new Vue({
  el: '#app',
  components: {
    compOne: compoent
  },
  data:{
    value: '123'
  },
  template:`
    <div>
      <comp-one :value="value" v-model="value"></comp-one>
    </div>
  `
})

// v-model 除了绑定值之外，还可以在内部自定义变量名称。