Vue3学习笔记-masaikk_is a type and must be imported using a type-only i

Vue3学习笔记-masaikk

学习vue3及其相关组件的笔记。代码位于myvue: vue前端学习 (gitee.com)的vue3分支。笔记源文件位于masaikk/interviewAccess - 码云 - 开源中国 (gitee.com)

---

vue项目基础

Vue-cli相关知识

vue-cli-service封装了webpack

例如demo1/node_modules/@vue/cli-service/package.json中，指定了bin所指向的二进制文件的位置。

{
   
    "bin": {
   
    "vue-cli-service": "bin/vue-cli-service.js"
  },
}
1
2
3
4
5
6
7

---

vite

vite很快，但是目前社区支持不够。

---

Vue生命周期

参考链接

---

Vue3父子组件传递值

参考如下博客：

https://juejin.cn/post/6965062549771386887

父传子是使用props的方法，子传父使用$emit的方法。

示例子组件向父组件传递信息：

//子组件
  methods:{
   
    sendEmitToFather(){
   
      console.log('sending...');
      this.$emit('son-mege','Hello from son')
    }
  }

1
2
3
4
5
6
7
8
9
10

父组件中在节点上绑定消息，传入函数

<template>
  <div>
    <p>
      {
   {
    mess }} in father page
    </p>
    <div>
      <use-props :son-data=this.mess @son-mege="getMessageFromSon"></use-props>
    </div>

  </div>
</template>

<script>
import useProps from "@/components/compisi/useProps";


export default {
   
  name: "CompPage",
  components: {
   useProps},
  data() {
   
    return {
   
      mess: 'from composition page'
    }
  },
  composition: {
   
    useProps
  },
  methods:{
   
    getMessageFromSon(data){
   
      console.log(data);
    }
  }
}
</script>
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43

自动传入data数据，打印的情况如下所示

---

props

这里是父向子传递数据的方式之一。

首先在自组件中声明props，如下所示：

export default {
   
  name: "useProps",
  props: {
   
    sonData: {
   
      type: String,
      required: true,
    }
  },
  data() {
   
    return {
   
      mess: "use data props"
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

其中，props可以是数组也可以是对象。

然后在父组件中使用子组件中传入props参数，如下所示：

    <div>
      <use-props :son-data=this.mess></use-props>
    </div>
1
2
3

完整代码为demo2/src/views/CompPage.vue

---

Composition API

Mixin

复用的代码，如果Mixin与组件中出现命名冲突

options API 的弊端

某一个功能的各个逻辑会拆分到各个属性中。如果这个组件变得更大，那么拆分的会越来越散，难以阅读。

setup函数

传入props与context参数。对应着父传子的props。

setup因为比beforeCreated()函数还前，所以没有this对象。

在setup中记录props为一个proxy对象

  setup(props, context) {
   
    console.log(props);
  },
1
2
3
4

另一个参数context，它包括三个属性：

• attrs：所有非prop的attribute
• slots：父组件的插槽
• emit：$emit

或者直接使用解构写法来获取着三个属性

  setup(props, {
    attrs, slots, emit}) {
   
    console.log(attrs
1
2
3