首页 > 其他分享 >Vue 父子组件双向绑定

Vue 父子组件双向绑定

时间:2022-08-26 17:26:58浏览次数:57  
标签:Vue hour sum 绑定 second time 组件 day minute

#### 子组件

<template>
    <div>
        <el-form :label-position="'left'">
            <el-row :gutter="gutter">
                <el-col :span="col">
                    <el-form-item>
                        <el-input v-model="time.day" placeholder="天" :min="0" type="number" class="custom-input" @change="sum">
                            <template slot="append">天</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="col">
                    <el-form-item>
                        <el-input v-model="time.hour" placeholder="时" :min="0" type="number" class="custom-input" @change="sum">
                            <template slot="append">时</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="col">
                    <el-form-item>
                        <el-input v-model="time.minute" placeholder="分" :min="0" type="number" class="custom-input" @change="sum">
                            <template slot="append">分</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="col">
                    <el-form-item>
                        <el-input v-model="time.second" placeholder="秒" :min="0" type="number" class="custom-input" @change="sum">
                            <template slot="append">秒</template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
export default {
    model: {
        prop: 'time',
        event: 'time_result'
    },
    props: {
        time: {
            type: Object,
            default: { day: 0, hour: 0, minute: 0, second: 0 }
        },
        gutter: {
            type: Number,
            default: 0
        },
        col: {
            type: Number,
            default: 12
        }
    },
    created() {
        this.sum();
    },
    methods: {
        sum() {
            let { day, hour, minute, second } = this.time;

            let c_day = 60 * 60 * 24 * parseInt(day);
            let c_hour = 60 * 60 * parseInt(hour);
            let c_minute = 60 * parseInt(minute);
            let c_second = parseInt(second);

            let sum = c_day + c_hour + c_minute + c_second;

            console.log('[ sum ] >', sum);
            this.$emit('sum_result', sum);
            this.$emit('time_result', { day, hour, minute, second });
        }
    }
};
</script>

<style scoped>
/* .custom-input {
    width: 100px;
} */
.custom-input /deep/ .el-input__inner {
    padding-right: 0px;
}
</style>

#### 父组件

<jx-day-convert
    v-model="time"
    :col="5"
    :gutter="10"
    @sum_result="
        data => {
            formRecharge.add_expire_time = data;
        }
    "
></jx-day-convert>



data() {
    return {
        formRecharge:{ add_expire_time: 0}
        time: { day: 0, hour: 0, minute: 0, second: 0 }
    };
},
methods: {

}

标签:Vue,hour,sum,绑定,second,time,组件,day,minute
From: https://www.cnblogs.com/lbx6935/p/16628248.html

相关文章

  • vue框架搭建流程
    注意要用VUE新版本@vue-cli一、检查node和npm是否已安装win+r打开命令工具,输入cmd,后依次输入node-v和npm-v。若能显示版本号,则安装成功。若不能,node下载路径为Node.js......
  • # vue dist 部署 serve
    vuedist部署servehttps://cli.vuejs.org/zh/guide/deployment.html#本地预览......
  • 运行vue项目时,报错can't resolve 模块名
    运行vue项目时,报错Modulenotfound:Error:Can'tresolve'jwt-decode'in'D:\BookStore2\bookstore-client\src\components  上网搜了一下,网上一些博客主要是这......
  • 分享艾思软件PHP(Thinkphp+Vue)后台自主框架测试试题
    艾思软件(http://ww.aisisoft.com.cn)后台框架测试试题说明:试题中出现的框架,新框架等名词,特指本次发布的AI-Admin框架3.0全部单选框架地址: https://gitee.c......
  • ant-design上传组件方法beforeUpload返回false或promise.reject仍然失效
    问题描述:在使用antdesign框架的Upload上传组件时,相信很多人做过上传文件的格式、大小、数量、或其他依赖条件等的限制,这些限制一般都是需要在beforeUpload方法中进行处理......
  • 在uniapp目录下的uni_module中创建自定义组件
    一、前言  在使用uni-app框架时,可能里面的内置组件和扩展组件都不是我们想要的,或者不能满足我们的需求,这时就必须得创建自定义组件了,在低版本的HbuilderX中所有的组......
  • 使用vue3对数据进行分页展示
    要获取用户的滚动位置,可以在末尾添加一列空白节点。每当出现空白时意味着滑倒网页最底部,则进行渲染数据。可以使用getBoundingClientRect来判断是否在页面底部。getBoundi......
  • vue-video-player 断点续播的实现
    1.安装插件npminstallvue-video-player--save2.Main.js引入组件importVideoPlayerfrom'vue-video-player'require('video.js/dist/video-js.css')require('......
  • Spring+Vue实现token登录
    原文链接前端代码:https://github.com/Snowstorm0/token-login-vue后端代码:https://github.com/Snowstorm0/token-login-spring使用Spring+Vue实现token登录、退出、......
  • vue3 onMounted is called when there is no active component
    Vue版本:3.0.0出现的问题:在setup()中onMounted()onActivated(),出现警告:[Vuewarn]:onMountediscalledwhenthereisnoactivecomponentinstancetobeassoc......