vue 子父组件相互传值
1.子传父
loading.vue
<div v-if='show'></div>
<script>
export default {
props:['show'],
}
</script>
main.vue
<Loading :show='loadShow'></div>
<script>
import Loading from '../../components/loading/loading.vue'//这个路径看自己项目情况
export default {
components:{Loading},
data(){
return{
loadShow:false
}
}
}
</script>
2.父传子
loading.vue
<div v-if='show' @click='getName'></div>
<script>
export default {
props:['show'],
data(){
return{
name:'张三'
}
}
methods:{
getName(){
this.$emit('name',this.name)
}
}
}
</script>
main.vue
<Loading :show='loadShow' @name='getName'></div>
<script>
import Loading from '../../components/loading/loading.vue'//这个路径看自己项目情况
export default {
components:{Loading},
data(){
return{
loadShow:false,
}
},
methods:{
getName(val){
console.log(val)//张三
}
}
}
</script>