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方法。就這样取到了子组件的值。其他情况也类似的处理。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。