是不是还可以接着写 @change ?

来源:3-9 vue如何自己实现v-model

浅芷初夏

2020-03-14

老师,子组件里既然使用 $emit(‘change’, $event.target),那父组件调用可以这样写吗:
<CustomVModel v-model=‘initValue’ @change=‘fn’>

data() {
return { initValue: ‘默认值’ }
},

methods: {
fn(target) {
console.log(target)
// do something,such as change initValue
}
}
第二个问题就是,通过看文档发现:$emit(‘update:title’, newTitle) 这样的方式,和 $emit(‘change’, $event.target) 有什么区别吗?文档描述得不是太清晰,我没看的太懂。

写回答

1回答

双越

2020-03-14

第一,v-model 是双向绑定,会自动变化 data 的值,再用 change 就多此一举了。想监听 data 可以用 watch 。

第二,$emit 第二个参数就是一个值,用 newTitle 还是 $event.target 都可以,只要能获取到你想要的值即可。

0
1
浅芷初夏
谢谢老师,第一个问题我明白了。第二个问题其实我是把 v-model 和 prop 双向绑定搞混了,又看了一遍文档才明白。 文档描述: 在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源。 这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之。 其实这个和 v-model 虽然有点相似,但是,是两个东西
2020-03-14
共1条回复

2024版 前端框架及项目面试 聚焦Vue3/React/Webpack

面向1-3年前端的框架及项目面试“刚需内容”

4663 学习 · 1644 问题

查看课程