生命周期，组件通信、插槽

一、生命周期

//此时vue实例已经进行了基础的初始化，但data数据还没有绑定到vue的实例，此时，访问不到data数据
            beforeCreate(){
                console.log('beforeCreate',this.msg);
            },
            //此时，data数据已经注入vue的实例，我们可以通过this访问到data数据
            created(){
                console.log('created',this.msg);
            },
            //此时，模板和数据已经结合，编译，但还没有挂载到指定的挂载点上 （或者没有挂载到指定的页面元素上）
            beforeMount(){
                console.log('beforeMount',this.$el);
            },
            //此时，编译后的模板已经挂载到挂载点上，我们会看到加载了数据的视图的更新
            mounted(){
                console.log('mounted',this.$el);
                // this.msg = "world"   //此时更改数据可以触发beforeUpdate钩子函数
            },

            //当有数据发生改变时，模板重新渲染之前，会触发该事件。
            beforeUpdate(){
                console.log('beforeUpdate',this.$el.innerHTML);
            },
            //当模板重新渲染之后，触发该事件
            updated(){
                console.log('updated',this.$el.innerHTML);
            },
            // 当执行vm.$destroy()，vue实例销毁之前发生
            beforeDestroy(){
                console.log('beforeDestroy');
            },
            //vue实例销毁之后发生，此时再改变数据，不会触发视图更新（或者视图重新渲染）
            destroyed(){
                console.log('destroyed');
            }

二、组件通信

Vue只有两种关系， 父子组件 非父子组件

1.父子通信:当我们需要把父组件中的数据传递给子组件时，使用父子通信

父组件

const Parent = {
  template: `
    <div>
      <child :m="msg"></child>
    </div>
  `,
  data () {
    return {
      msg: "这是父组件中的数据"
    }
  }
}

子组件

const Child = {
  template: `
    <div>{{m}}</div>
  `,
  // 设置prop接收
  props: ['m']
}

2.子父通信:当我们要把子组件中的数据，传递给父组件时，使用子父通信
父组件

const Parent = {
  template: `
    <div>
      <child :msg="msg" @send:msg="getMsg"></child>
    </div>
  `,
  data () {
    return {
      msg: '父组件中的数据'
    }
  },
  methods: {
    getMsg (msg) {
      this.msg = msg
    }
  }
}

子组件

const Child = {
  template: `
    <div>
      {{msg}}
      <button @click="changeMsg">点击修改msg</button>
    </div>
  `,
  props: ['msg'],
  methods: {
    changeMsg () {
      // this.msg = "新的内容" // 错误的 不要在子组件中直接修改父组件中传来的数据

      // 正确的
      this.$emit('send:msg', '子组件发过去的数据')
    }
  }
}

注意：在组件标签上看到属性，那么表示对应的父组件给子组件传值，如果我们在组件标签上看到@xxx="函数" 表示父组件在监听子组件的自定义事件

3.非父子通信:利用的是自定义事件，因为自定义事件的监听和触发必须得是同一个this，所以我们需要一个公共的vue实例，称其为bus
bus.js

const bus = new Vue()

组件1

const com1 = {
  template: `
    <div>
      <button @click="changemsg">点击修改组件2中的数据</button>
    </div>
  `,
  methods: {
    changemsg () {
      bus.$emit('changeMsg', '数据')
    }
  }
}

组件B

const com2 = {
  template: `
    <div>{{msg}}</div>
  `,
  data () {
    return {
      msg: '消息'
    }
  },
  created () {
    bus.$on('changeMsg', (msg) => {
      this.msg = msg
    })
  }
}

三、插槽

1、普通插槽

const com = {
  template: `
    <div>
      其他内容
      <slot></slot>
    </div>
  `
}

<div>
  <com>
    自定义内容
  </com>
</div>

2、具名插槽

默认的slot有一个名字为default

const com = {
  template: `
    <div>
      其他内容
      <slot name="自定义slot名字"></slot>
      <slot name="自定义slot名字2"></slot>
    </div>
  `
}

<div>
  <com>
    <template v-slot:自定义slot名字></template>
    <template v-slot:自定义slot名字2></template>
  </com>
</div>

3、作用域插槽

给用户留一些需要的数据

const com = {
  template: `
    <div>
      其他内容
      <slot key="value" key2="value2" key3="value3"></slot>
    </div>
  `
}

<div>
  <com>
    <template v-slot="scope">
      {{scope.key}}
      <button >删除</button>
    </template>
  </com>

  <com>
    <template v-slot="{key}"></template>
  </com>
</div>