zoukankan      html  css  js  c++  java
  • vue 父子组件数据的双向绑定大法

    官方文档说明

    • 所有的 prop 都使得其父子 prop 之间形成了一个 单向下行绑定
    • 父级 prop 的更新会向下流动到子组件中,但是反过来则不行
    • 2.3.0+ 新增 .sync 修饰符
    • 以 update:my-prop-name 的模式触发事件实现 上行绑定 最终实现 双向绑定
      举个栗子
      this.$emit('update:title', newTitle)

    代码实现

    child.vue

    <template>
      <div>
          <input type="text" v-model="sonValue">
          <div>{{ fatherValue }}</div>
      </div>
    </template>
    
    <script>
    
    export default {
      props: {
        fatherValue: {
          required: true
        }
      },
      data () {
        return {
          sonValue: this.fatherValue
        }
      },
      watch: {
        sonValue (newValue, oldvalue) {
          this.$emit('update:fatherValue', newValue)
        },
        fatherValue (newValue) {
          this.sonValue = newValue
        }
      }
    }
    </script>

    father.vue

    <template>
      <div class="hello">
        <!-- input实时改变value的值, 并且会实时改变child里的内容 -->
        <input type="text" v-model="value">
        <child :fatherValue.sync="value" ></child>
      </div>
    </template>
    <script>
    import Child from './Child'  //引入Child子组件
    export default {
      data() {
        return {
          value: ''
        }
      },
      components: {
        'child': Child
      }  
    }
    </script>
  • 相关阅读:
    支付宝沙箱环境应用
    七牛云视频托管
    腾讯云短息验证码接口
    git远程连接(码云)
    git
    字间距
    html文本保留空格
    mysql重启导致AUTO_INCREMENT从1开始
    js保留两位小数
    vue中watch的基本用法
  • 原文地址:https://www.cnblogs.com/YrRoom/p/11627914.html
Copyright © 2011-2022 走看看