Vue3-v-model实现组件间的数据双向绑定

v-model主要用于表单上的数据双向绑定，现在记录下父子组件间的数据双向绑定实现方式

v-model父子组件间的数据双向绑定

• 父组件向子组件传递foo数据 在foo自定义属性前加v-model
• 利用props的特性可以实现双向绑定多个值

  <template>
      <div>
           <input_ v-model:foo="foo" v-model:username="username"></input_>
           <br>
           {{foo}}
           <br>
           {{username}}
      </div>
  </template>
  <script>
      import input_ from "./input_";
      export default {
          data(){
            return{
                foo:'女装',
                username:'管理员'
            }
          },
          components:{
              input_
          }
      }
  </script>

• 子组件
• @input=”$emit(‘update:foo’,$event.target.value)”动态更改父组件foo的数据

  <template>
      <div>
         <input type="text" :value="foo" @input="$emit('update:foo',$event.target.value)">
         <br>
         <input type="text" :value="username" @input="$emit('update:username',$event.target.value)">
      </div>
  </template>
  
  <script>
      export default {
          name: "input_",
          props:['foo','username']
      }
  </script>

赏

谢谢你请我吃糖果

支付宝

微信