1、子,父组件相互传值。


话不多说直接上代码:
父组件向子组件传值就是通过子组件定义的props
子组件:

<template>
    <input type="text" ref="input" :id="id" :placeholder="tips" @click="click(id)" :value="name" v-model="name">
</template>
<style>
    @import "../../../assets/css/jedate.css";
</style>
<script>
    import "../../../assets/js/jquery.jedate.min"
    export default{
        props: {
            tips: {
                type: String,
                default: ""
            },
            id: {
                type: String,
                default: ""
            },
            value: {
                type: [String, Number],
                default: ""
            }
        },
        data(){
            return {
                name: "",
            }
        },
        methods: {
            click: function (id) {
                var _this = this;
                $.jeDate("#" + id, {trigger: false,
                    isTime: true,
                    format: 'YYYY-MM-DD hh:mm:ss',
                    choosefun: function(datas){ //选择日期完毕的回调
                       var val = datas[0].value.toString();
                        _this.updateValue(val);
                    }
                });
            },
            updateValue: function (value) {
                var myValue = value; //将输入的文本框内容传来
                this.$emit('eventTime', myValue); //自定义事件,并传参
            }
        },
    }
</script>

父组件:

<template>
   <timeControl class="form-control" :tips="pushTime" :id="pushTimeId"
    v-bind:value="postData.pushTime" v-on:eventTime="pushTimeDate"
    v-model="postData.pushTime">
    </timeControl>
    <script>
    import modal from "../../../../components/common/modal/modal.vue"
    import timeControl from "../../../../components/common/timeControl/timeControl.vue"
    export default{
        data(){
            return {
                pushTime: "设置推送的时间",
                pushTimeId: 'push_id',
                postData: {
                    pushTime: null,
     
                }
            }
        },
        methods: {
            pushTimeDate: function (myValue) {
                this.postData.pushTime = myValue;
            },
        },
        components: {
            timeControl:timeControl
        },
    }
</template>

以上timeControl是针对jedate时间控件做的一个组件,
当选择完毕后会调用choosefun里面的方法,方法里面将值通过 this.$emit('eventTime', myValue);
将会调用父组件的pushTimeDate方法。就這样取到了子组件的值。其他情况也类似的处理。


執筆_詮釋22
29 声望1 粉丝