Vue:.native修饰符 父子组件挂载顺序 插槽的使用

1. Vue .native修饰符

• .native - 监听组件根元素的原生事件。
  即直接写到组件标签里
  例如：
  
  这样才能触发click事件

2. 父子组件挂载顺序

父 beforeCreate
父 created
父 beforeMount
子 beforeCreate
子 created
子 beforeMount
子 mounted
父 mounted

3. vue插槽的使用

• 具名插槽

子组件：

<slot name="han"></slot>

父组件：

<Chil>
  <template slot="han">123</template>
</Chil>

如何拿到插槽的子组件的值？利用作用域插槽

子组件

<slot :put="hh"></slot>

data() {
    return {
      hh: '温暖',
    }
  },

父组件

<List2 :get="currentIndex" v-slot="slotProps">
    <template class="go">{{ slotProps.put }}</template>
</List2>

结果：

父组件用v-slot或者slot-scop都可拿到值！！同时我们可以使用解构方式：

<template slot-scope="{ put }" class="go">{{ put }}</template>