用vue实现双向数据绑定
1.给:value属性赋值
2.接收input事件 把值赋予给变量
<button :value="count" @input="val => count = val"></button>
3.所以子组件里 就要用props+value接收使用
4.子组件触发input事件传值
所以 使用v-model也可以给组件实现双向数据绑定,v-model也就是一种:value + @input 的语法糖
下面是一个组件自己不使用v-model来完成双向绑定的方法:
<template>
<div>
<input type="text" :value="msg" @input="valuechange">
<h3>{{ msg }}</h3>
</div>
</template>
<script>
export default {
data () {
return {
msg: '千秋辞'
}
},
methods: {
valuechange (e) {
this.msg = e.target.value
}
}
}
</script>
<style lang="less" scoped>
</style>
绑定后打开网页的状态:
输入框自行修改后的状态:
