子 tan里面的代码
<template>
<div :visible="di">
子组件:
<span style="color:red">{{inputName}}</span>
</div>
</template>
<script>
export default {
// 接受父组件的值
props: {
inputName: String,
panelShow:Boolean,
},
computed:{
di(){
return this.panelShow
},
}
}
</script>
父 aa里面的代码
<template>
<div>
父组件:
<input type="text" v-model="name">
<button @click="aac()">按钮</button>
<br>
<br>
<!-- 引入子组件 -->
<child :inputName="name" v-show="panelShow" :panelShow="panelShow"></child>
</div>
</template>
<script>
import child from '../components/tan'
export default {
components: {
child
},
data () {
return {
name: '我是子组件哦',
panelShow:false
}
},
methods:{
aac(){
this.panelShow=true
},
}
}
</script>