vue单项文件组件,父传子,子传父

一.父组件

<template>
  <div>
    <navbarview myname="电影" :myshow="false"></navbarview>

    <navbarview myname="剧场" :myshow="false"></navbarview>
  </div>
</template>

<script>
import navbarview from '../components/NavbarView.vue'
export default {
  components:{
    navbarview
  },
  data(){
    return{
      
    }
  }
}
</script>

二.子组件

<template>
    <div class="NavBar">
        <button v-show="myshow">#</button>
        <span>{{myname}}</span>
        <button v-show="myshow">*</button>
    </div>
</template>

<script>
export default {
    props:{
        myname:{
            type:String,
            default:''
        },
        myshow:{
            type:Boolean,
            default:true
        }
    },
    data(){
        return{
            
        }
    }
}
</script>

<style>
.NavBar{
    width: 100vw;
    height: 30px;
    background-color: #f70;
    
}
</style>

---

---

---

三.子传父

<template>
  <div>
    <!-- 导航栏 -->
    <navbarview @myshijian="hanll" myname="电影" :myshow="false"></navbarview>
    <!-- 弹框 -->
    <bounced v-show="inShow"></bounced>
  </div>
</template>

<script>
// 导航栏
import navbarview from '../components/NavbarView.vue'
// 弹框
import bounced from '../components/BouncedView.vue'
export default {
  components:{
    // 导航栏
    navbarview,
    // 弹框
    bounced
  },
  data(){
    return{
      inShow:false
    }
  },
  methods:{
    hanll(data){
      console.log(data)
      this.inShow = !this.inShow
    }
  }
}
</script>

四.子组件

<template>
    <div class="NavBar">
        <button @click="myclick()">#</button>
        <span>{{myname}}</span>
        <button v-show="myshow">*</button>
    </div>
</template>

<script>
export default {
    props:{
        myname:{
            type:String,
            default:''
        },
        myshow:{
            type:Boolean,
            default:true
        }
    },
    data(){
        return{
            
        }
    },
    methods:{
        myclick(){
            this.$emit("myshijian",11111)
        }
    }
}
</script>

<style>
.NavBar{
    width: 100vw;
    height: 30px;
    background-color: #f70;
    
}
</style>

五.子组件

<template>
    <div class="bounced">
        
    </div>
</template>

<script>
export default {
    
}
</script>

<style>
.bounced{
    width: 300px;
    height: 300px;
    background-color: antiquewhite;
    margin: 50px auto; 
}
</style>