自定义组件v-model (父组件赋值,子组件无响应问题)
一个组件上的 v-model
默认会利用名为 value
的 属性 和名为 input
的事件,也就是说会把v-model中的内容赋值给组件中props里面的value,同时监听input事件。有时候我们会在父组件中直接修改v-model中的绑定值,却发现子组件却并没有渲染出来。
例如父组件代码如下:
子组件代码如下:
这个时候我去父组件中点击 update按钮去修改this.content的值,会发现this.content的值的确变了,但是输入框中却并没有任何变化。然后我们发现在组件中仍然可以监听到value的变化,那么解决方案已经很明显了,就是在组件中监听value变化,同时将变化后的value值重新赋值给组件内的content,就可以达到父组件赋值,子组件同时响应的问题。
代码示例如下: