zoukankan      html  css  js  c++  java
  • Vue中如何在组件内部实现一个双向数据绑定?

    假设有一个输入框组件,用户输入时,同步父组件页面中的数据。

    具体思路:父组件通过props传值给子组件,子组件通过 $emit 来通知父组件修改相应的props值,具体实现如下:

    import Vue from 'vue'
    
    const component = {
     props: ['value'],
     template: `
       <div>
         <input type="text" @input="handleInput" :value="value">
       </div>
     `,
     data () {
       return {
       }
     },
     methods: {
       handleInput (e) {
         this.$emit('input', e.target.value)
       }
     }
    }
    
    new Vue({
     components: {
       CompOne: component
     },
     el: '#root',
     template: `
       <div>
         <comp-one :value1="value" @input="value = arguments[0]"></comp-one>
       </div>
     `,
     data () {
       return {
         value: '123'
       }
     }
    })

    可以看到,当输入数据时,父子组件中的数据是同步改变的:

    我们在父组件中做了两件事,一是给子组件传入props,二是监听input事件并同步自己的value属性。那么这两步操作能否再精简一下呢?答案是可以的,你只需要修改父组件:

    template: `
       <div>
         <!--<comp-one :value1="value" @input="value = arguments[0]"></comp-one>-->
         <comp-one v-model="value"></comp-one>
       </div>
     `

    v-model 实际上会帮我们完成上面的两步操作。

    -------------------------------------------

    个性签名:独学而无友,则孤陋而寡闻。做一个灵魂有趣的人!

    如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,博主在此感谢!

    万水千山总是情,打赏一分行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主,哈哈哈(っ•̀ω•́)っ✎⁾⁾!

  • 相关阅读:
    UVA 10462 Is There A Second Way Left?(次小生成树&Prim&Kruskal)题解
    POJ 1679 The Unique MST (次小生成树)题解
    POJ 2373 Dividing the Path (单调队列优化DP)题解
    BZOJ 2709 迷宫花园
    BZOJ 1270 雷涛的小猫
    BZOJ 2834 回家的路
    BZOJ 2506 calc
    BZOJ 3124 直径
    BZOJ 4416 阶乘字符串
    BZOJ 3930 选数
  • 原文地址:https://www.cnblogs.com/mahmud/p/10584227.html
Copyright © 2011-2022 走看看