脚本宝典收集整理的这篇文章主要介绍了vue子组件向父组件传值。，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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方法。就這样取到了子组件的值。其他情况也类似的处理。

脚本宝典总结

以上是脚本宝典为你收集整理的vue子组件向父组件传值。全部内容，希望文章能够帮你解决vue子组件向父组件传值。所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。