Vue组件通信2-----子传父（通过事件）--$emit

本文链接：https://blog.youkuaiyun.com/weixin_61977924/article/details/120477431

子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件，将需要传的值作为t$emit的第二个参数，该值将作为实参传给响应自定义事件的方法，在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="lib/vue.js"></script>
</head>

<body>
  <div id="box">   
    <navbar  @myevent="handleEvent"></navbar>
    <sidebar v-show="isShow" ></sidebar>
  </div>

  <script>
    Vue.component("navbar", {
      template: `
        <div style="background-color: red;">
          <button @click="handleClick()">点击</button>-导航栏
        </div>
      `,
      methods:{
        handleClick(){
          // console.log("子传父， 告诉父组件 ，取反您的isShow")

          this.$emit("myevent",1000000000)
        }
      }
    })

    Vue.component("sidebar", {
      template: `
      <div style="background-color: yellow;" >
        <ul>
          <li>菜菜</li>
          <li>臭宝</li>
          <li>渣男</li>
        </ul>
      </div>
      `
    })

    new Vue({
      el: "#box",
      data: {
        isShow: true
      },
      methods:{
        handleEvent(data){
          console.log("父组件的定义的事件",data)
          this.isShow = !this.isShow
        }
      }

    })

  </script>
</body>
</html>