“互联网+”
技术服务解决方案提供商

0371-61875577
”互联网+“
技术服务解决方案提供商

实现vue父子组件中数据双向绑定

vue
痞子 2019-08-10T09:32:45.000Z
466 0 1

第一种

实现思路如下:
1.父组件通过props向子组件传递数据,并向子组件提供一个方法更新自己的数据。
2.子组件中当数据更新时,调用父组件提供的方法,将更新之后的数据传递给父组件。

// 父组件 app.vue <template> <my-input :msg="msg" :updateMsg="updateMsg"/> </template> <script> import myInput from './my-input.vue'; export default { name: 'app', components: { myInput }, data () { return { msg: '' } }, methods: { updateMsg (msg) { this.msg = msg; } } } </script>
// 子组件 my-input.vue <template> <div> <input type="text" :value="msg" @input="e => this.updateMsg(e.target.value)"> </div> </template> <script> export default { name: 'my-input', props: { msg: String, updateMsg: Function } } </script>

第二种

实现思路如下:
1.父组件通过props向子组件传递数据,并监听子组件emit的事件,在emit事件的回调中更新自己的数据。
2.子组件中当数据更新时,向父组件emit一个事件,将更新之后的数据传递给父组件。

// 父组件 app.vue <template> <my-input :msg="msg" @input="msg => this.msg = msg"/> </template> <script> import myInput from 'my-input.vue'; export default { name: 'app', components: { myInput }, data () { return { msg: '' } } } </script>
// 子组件 my-input.vue <template> <input type="text" :value="msg" @input="$emit('input', $event.target.value)"> </template> <script> export default { name: 'my-input', props: { msg: String } } </script>

第三种

实现思路如下:
1.父组件通过props向子组件传递数据,使用vue指令v-model实现父子组件数据的双向绑定。
2.子组件中当数据更新时,向父组件emit一个input事件,将更新之后的数据传递给父组件。

// 父组件 app.vue <template> <my-input :msg="msg" v-model="msg"/> </template> <script> import myInput from './my-input.vue'; export default { name: 'app', data () { return { msg: '' } } } </script>
// 子组件 my-input.vue <template> <input type="text" :value="msg" @input="$emit('input', $event.target.value)"> </template> <script> export default { name: 'my-input', props: ['msg'] } </script>
1
1

点击展开全文

0/200

全部评论

    查看更多