zoukankan      html  css  js  c++  java
  • vue3.0 在单个组件实例上创建多个 v-model 绑定

    目录:

    Register.vue:

    <template>
      <div>
        用户名:<input type="text" :value="username" @input="handleUsername" />
      </div>
      <div>
        密码:<input type="text" :value="password" @input="handlePassword" />
      </div>
    </template>
    
    <script>
    export default {
      props: {
        username: String,
        password: String,
      },
      setup(props, context) {
        const handleUsername = (e) => {
          context.emit("update:username", e.target.value)
        }
    
        const handlePassword = (e) => {
          context.emit("update:password", e.target.value)
        }
    
        return {
          handleUsername,
          handlePassword,
        }
      },
    }
    </script>
    
    <style></style>
    

    Home.vue:

    <template>
      <Register v-model:username="username" v-model:password="password"></Register>
      <button @click="handleRegister">注册</button>
    </template>
    
    <script>
    import { reactive, toRefs } from "vue"
    import Register from "../components/Register"
    
    export default {
      components: {
        Register,
      },
      setup() {
        const state = reactive({
          username: "admin",
          password: "123456",
        })
    
        const { username, password } = toRefs(state)
    
        const handleRegister = () => {
          let { username, password } = state
          console.log(username, password)
        }
    
        return {
          username,
          password,
          handleRegister,
        }
      },
    }
    </script>
    
    <style></style>
    
  • 相关阅读:
    js实现全选反选功能
    seajs笔记
    延迟加载图片
    JavaScript 数组基本操作
    图片上传,头像上传
    命令模式
    动态加载js css 插件
    发布-订阅模式
    js 切换全屏
    JavaScript 经典之一 闭包
  • 原文地址:https://www.cnblogs.com/xutongbao/p/14876276.html
Copyright © 2011-2022 走看看