vue:组件使用v-model实现2个组件间的数据双向绑定

一、需要实现的需求:

子组件输入框的数据发生改变,父组件的数据跟着实时改变;

父组件的数据发生改变,子组件的数据跟着实时改变。

二、实现思路:

1、(1)在父组件引入子组件。(2)子组件在父组件当成标签使用时使用v-model来绑定数据

2、(1)当子组件输入框的数据发生改变时,触发父组件的input事件,并把输入框的数据传给父组件。

(2)当子组件接收到父组件传过来的value值时,实时显示在页面。

三、代码

父组件代码:Mine.vue



子组件代码:One.vue



四、查看页面效果:

vue:组件使用v-model实现2个组件间的数据双向绑定_第1张图片

你可能感兴趣的:(前端,前端框架,ecmascript,vue.js,vue)