传值

父组件

<template>
<div>
<div v-if="showFlag">
<h1>父组件</h1>
<el-button type="primary" size="mini" @click = "handleClick">进入子组件</el-button>
<h2>{{time}}</h2>
</div>
<childen-one :patInfo = 'patInfo' v-else :handleShow = "handleShow" :num = 'num' @fatherTo = "fatherClick"></childen-one>
</div>
</template>
<script>
import childenOne from '@/components/democ/childenOne.vue'

export default {
data() {
return {
patInfo: {
name:'张三',
age:'28'
},
num:12,
showFlag:true,
time: ''
}
},
provide() {
return {
provideMag:'通过provide传递得数据'
}
},
components:{
'childen-one':childenOne
},
methods:{
handleClick() {
this.showFlag = false
},
handleShow() {
this.showFlag = true
},
fatherClick(el) {
this.time = el
}
}
}
</script>

 

子组件

<template>
<div>
<el-button type="success" size="medium" @click="back">返回</el-button>
<h1>{{ patInfo.name }}-----{{ patInfo.age }}</h1>
<h3>{{$attrs.num}}</h3>

<!-- 子组件给父组件传值 -->
<el-button @click = "sonTo" type="primary" size="medium">子传父</el-button>

<h1>provide:{{provideMag}}</h1>
</div>
</template>
<script>
export default {
props: {
patInfo: {
type: Object
},
handleShow: {
type: Function
}
},
data() {
return {
time:new Date()
};
},
inject:['provideMag'],
methods: {
back() {
this.handleShow();
},
sonTo() {
this.$emit('fatherTo',this.time)
}
}
};
</script>