:ref属性获获取方式

this.$children移除，使用ref获取子组件信息

slot

子组件中定义插槽

1
<slot name="slotName" :data="slotData"> </slot>

在vue 2.6之前这样引入组件

1
2
3
4
5
<子组件名>
  <template slot="slotName" slot-scope="scope">
    <span>{{scope.data}}</span>
  </template>
</子组件名>

在2.6之前slot属性指定插槽的名字。slot-scope属性传值。

2.6之后，新增v-slot指令。可以不用之前的slot和slot-scope了。

1
2
3
4
5
<子组件名>
  <template v-slot:slotName = "scope">
    <span>{{scope.data}}</span>
  </template>
</子组件名>

在vue3中slot和slot-scope属性已被弃用。只能使用v-slot。

v-slot的简写方式，把v-slot:用#号代替。

1
<template #slotName = "scope"></template>

Composition API

vue3新增composition api。相较于传统的options api，它有更好的可编程性，更优的代码组织，更高的可复用性。composition api提供了几个方法ref，reactive

template部分内容

1
2
3
<div> 我的年龄：{{age}} </div>
<div> {{user.name}}的年龄：{{user.age}} </div>
<button @click="addAge"> 我长了一岁 </button>

javascript部分内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 首先要引入用到的方法
import { ref, reactive, onMounted } from 'vue'
export default {
  // 声明一个setup函数。这些方法都写到这个函数中
    setup() {
      // ref通常维护单数据，如整数、字符串之类的。
      const age = ref(18)
      // reactive一般接收对象或数组
 			const user = reactive({
        name: '王明',
        age: '16'
      })
      // 自定义函数
      function addAge(){
        age++
      }
      // setup中的生命周期
      onMounted(){
        console.log('onMounted')
      }
      // return出去的变量才可以在模板中显示
      return {
        age,
        user,
        addAge,
      }
    }
  }

等等