zoukankan      html  css  js  c++  java
  • vue使用填坑之:model和v-model的区别

    v-model通常用于input的双向数据绑定 <input v-model="parentMsg">,也可以实现子组件到父组件数据的双向数据绑定:
    首先说说v-model的用法:

    父组件: 

       

     <div>
          <input type="text" v-model='msg'>
          <child v-model='msg'></child>
      </div>

    子组件: 

     

     Vue.component('child', {
          props: ['value'],
          template: '<input type="text" @input="handleInput" :value=value />',
          methods: {
            handleInput(e){
              console.log(e);
              this.$emit('input', e.target.value);
            }
          }
        })
       new Vue({
        el:'#example',
        data:{
          msg:'好天气',
          parentMsg:''
        }
       })  

    无论改变父组件还是子组件的输入框,value和msg的值都会改变,两个输入框的值也就同时改变了。

     :model和v-model的区别
         :model是v-bind:model的缩写,<child :model="msg"></child>这种只是将父组件的数据传递到了子组件,并没有实现子组件和父组件数据的双向绑定。当然引用类型除外,子组件改变引用类型的数据的话,父组件也会改变的。

  • 相关阅读:
    PHP MySQL 插入多条数据
    PHP MySQL 插入数据
    PHP MySQL 创建数据表
    PHP MySQL 创建数据库
    PHP 连接 MySQL
    PHP MySQL 简介
    PHP JSON
    12_短信发送器_发送短信实现
    11_短信发送器_快速回复页面实现
    10_短信发送器_获取电话号码
  • 原文地址:https://www.cnblogs.com/xuzhudong/p/8617487.html
Copyright © 2011-2022 走看看