vue中组件子传父个然理解，

拿个例子来

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

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

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



    //组件2
    Vue.component("sidebar", {
      template: `
      <div style="background-color: yellow;" >
        <ul>
          <li>11111</li>
          <li>11111</li>
          <li>11111</li>
          <li>11111</li>
          <li>11111</li>
          <li>11111</li>
          <li>11111</li>
          <li>11111</li>
          <li>11111</li>
          <li>11111</li>
        </ul>
      </div>
      `
    })



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

    })
  </script>

​

 首先创建组件，组件一：navbar    组件二 ：sidebar    根组件：使用名字被挂载（绑定）到vue实例上的标签，这里是 名为box 的 div

然后，子组件为什么叫子组件，其实就是和标签一样，包含关系，比如<div><p></p></div>  div就是父，p就是子   组件一样的道理， 然后就是，组件定义的时候只是组件，不是父组件或者子组件，得有人叫他去当父或者当儿子，才能算父组件或者子组件。 所以这里根组件通过下面创建的组件的名字 来调用组件拿来当儿子（就成了子组件）  以组件名来创建自定义标签来使用。所以就有了  

<navbar  @myevent="handleEvent"></navbar>
<sidebar v-show="isShow" ></sidebar>

两个自定义标签 同时根组件也有了两个子组件，还加上了监听事件，和动态显示和隐藏。

还有就是，这里其实和html标签是一样的，只不过是自定义标签和dom原生标签的区别，里面的方法函数啥的都在vue实例里定义和使用

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

好了然后传递逻辑是这样的，首先在根组件把组件调用做子组件时   子组件里的内容就渲染出来了 页面上就有了按钮和内容啥的

点击按钮，点击事件就会触发，在点击事件方法里有个this.$emit（） 用于发射数据给父组件或者其他监听，所以这里就是发射了个事件并带着一个数据参数（1000000000）出去 给监听了自己（@myevent：@表示监听者或监听器    myevent是$emit  发射的事件）的那个标签   ，当监听事件触发时，就会执行绑定监听事件的那个方法（事件处理器）（handleEvent）并把值（1000000000）当作参数传进去，这个方法（事件处理器）（handleEvent）在哪里呢，在vue里

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

    })

之前$emit发射事件时还有一个值（1000000000），当监听事件触发时，handleEvent方法（也是事件处理器）就会触发并且（1000000000）就自动当成参数传进去 所以handleEvent(data) 中的data就是1000000000

然后 handleEvent方法里的东西该怎样就怎样就好了   

子传父就是这样的拉    @myevent是监听事件    handleEvent是方法也是事件处理器