子元件:
<template>
<div id="child" >
<div>
<span>{{childName}}</span><br />
<div class="divWidth">
{{startTime}}:
<input type="text" v-model="childValue" />
<button @click="childClick">搜尋</button>
</div>
</div>
</div>
</template>
<script>
export default {
name:'child',
data(){
return {
childValue:'hhhhh'
}
},
props:{
childName:'',
startTime:'',
twoValue:''
},
methods:{
childClick(){
this.$emit("send", this.childValue);
},
initData(){
console.log(this.twoValue)
}
},
mounted(){
}
}
</script>
父元件:
<template>
<div>
<div>
<child :startTime="startTime" :twoValue="twoValue" :childName="name" @send="childByValue"></child>
{{childValue}}
</div>
</div>
</template>
<script>
import child from '@/components/child'
export default {
name: "Customer",
data(){
return{
name:'yfx',
childValue:'',
startTime:"結束日期",
twoValue:{
one:'ONE',
two:'TWO'
}
}
},
components:{
child
},
methods:{
childByValue:function(childValue) {
// childValue就是子元件傳過來的值
this.childValue = childValue;
console.log(this.childValue)
},
},
mounted(){
this.initData();
}
}
</script>
<style scoped>
</style>