为什么自定义双向绑定没反应，可以解释下代码逻辑不是太明白
来源：2-8 vue如何自己实现v-model
老司鸭
2021-08-05 18:33:02
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<!-- : v-bind: @ v-on: -->
<div id="root">
</div>
<script type="text/javascript">
const son = {
model: {
prop: 'text',
event: 'change'
},
props: {
type: String,
default() {
return ''
}
},
template:
`
<div>自定义双向绑定：</div>
<input type="text" :value="text" @input="$emit('change',$event.target.value)">
`
}
const app = Vue.createApp({
components: { 'son': son },
data() {
return {
name: 'haha'
}
},
template:
//把name的值传到子组件
`
<div>{{name}}</div>
默认双向绑定：<input type="text" v-model="name">
<son v-model="name" />
`
});
const vm = app.mount('#root');
</script>
</body>
</html>
1回答
-
好帮手慕久久
2021-08-06
同学你好，解答如下：
同学使用的是vue3版本：
而课程中讲解的是vue2版本：
两个版本的自定义双向绑定语法是不同的，所以同学的代码没有效果。
vue3中，如果想实现自定义双向绑定，需要如下这样写：
vue2版本的写法，需要做如下调整才行：
不论是2版本还是3版本，自定义双向绑定的写法都是固定的。
以vue2版本的写法为例，简单的逻辑如下：
给子组件绑定父组件中的数据：
子组件中，需要配置一下：
给子组件的input绑定value值，就实现了父组件单一给子组件传值：
然后给子组件的input输入框绑定事件（input）；往子组件的input中输入内容时，就会触发input事件；在input的事件处理函数中，再次触发自定义事件change，参数就是子组件input中的内容：
此时，vue底层就会对应监听触发的change事件，并把传过来的参数（子组件中的内容），传给父组件，这样就实现了双向绑定。
祝学习愉快！
0
相似问题
回答 2