vue组件父子通信

父传子通过属性
子传父通过方法

组件父传子（数据传递）

组件复用的时候会存在父传子

1. 父组件在html结构上自定义属性

<!-- :表示动态绑定，这样里面的数据false就会按照js里的类型进行解析。被认定为boolean值-->
<navbar mytitle="电影" :myleft="false"></navbar>

2. 子组件通过props选项接受需要父组件传递的属性。有三种写法

Vue.component("navbar",{
      //1-接受mytitle 属性
      // props:["mytitle","myleft"],
      //2-接受mytitle 属性,验证 属性值
      // props:{
      //   myleft:Boolean,
      //   mytitle:String
      // },
      //3-接受mytitle 属性,验证 属性值，默认值
      props:{
        mytitle:{
          type:Boolean,
          default:true
        },
        mytitle:{
          type:String,
          default:"11111"
        }
      },
      template:`
        <div style="background:red;color:white">          
          <button v-show="myleft">返回</button>
          <span>  {{mytitle}}  </span>  
        </div>
      `
    })

组件子传父（数据传递）

实现抽屉效果存在子传父

1. 父组件在html结构上自定义事件

<!-- @后面的名字是自定义的，也可以是@wht.  是为了区分js原生的事件。 handleEvent需定义在父组件的methods里-->
<navbar @myevent="handleEvent"></navbar>
<sidebar v-show="isShow"></sidebar>

new Vue({
  el:"#box",
  data:{
    isShow:true
  },
  methods:{
    handleEvent(data){
      console.log(data) // 此处打印11111111. 为子组件传递过来的数据
      this.isShow= !this.isShow
    }
  }
})

2. 子组件通过$emit触发父组件里自定义的事件（事件名字得对应上）

Vue.component("navbar",{
  template:`
    <div>
      <button @click="handleClick()">click</button>
      navbar-导航栏
      <button>click</button>
    </div>
  `,
  methods:{
    handleClick(){
      // console.log("navbar孩子，希望父组件能够将isShow 取反")
      //触发 navbar身上的监听事件。$emit方法两个参数。第一个参数：事件名称；第二个参数：数据
      this.$emit("myevent","11111111111111111")
    }
  }
})