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 除了绑定值之外，还可以在内部自定义变量名称。 ```