vue 自定义组件 v-model 用法

最近解锁一个vue新用法,自定义组件 v-model,记录下来,加深印象,也希望对有需要的同学一些启发.

//父组件代码

父组件定义好需要传给子组件的值

//子组件代码

子组件中,先用props接收,model中属性prop为父组件传过来的值,event为回应父组件的方法,此时父组件v-model绑定值,无需方法接收,能实现直接通信,props接收值名字不一定要与父组件一致.

官方有提到一种简单的写法:默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。修改一下代码,实现相同的效果.

//附上子组件代码

效果图

修改之前

image.png

修改之后

image.png

父子组件的值都改变了,实现了组件直接的v-model绑定

附上官网地址:https://cn.vuejs.org/v2/guide/components-custom-events.html