Vue3组件（一）做个组件尝尝鲜

.vue文件的分类

在工程化项目里面，默认会设置views和components这两个文件夹，而两个文件夹里面放的又都是.vue文件，既然是同类型的文件，为啥要设置两个文件夹呢？因为用途有点区别。

按照使用方式，.vue文件可以分为页面、组件和控件三类。

页面

一般存放在views目录里面，一开始我还以为这里的.vue文件不需要属性（props）呢，因为没有谁能给他传递属性值。 后来学习路由知识后发现我错了，路由不仅可以加载组件，而且还能给组件传递属性。

这样.vue文件不管在哪，都可以有属性（props），那么从代码角度，就没有明确的区分了。

所以只能从使用方式来区分一下。

页面可以看做是路由直接加载的组件，作为一个“容器”，存放多个组件，确定其位置，负责各个组件之间的连系。

组件

导航、header、footer这类多个页面共用的部分，或者功能比较独立的部分。 从页面里面分离出来，可以让代码更清晰易读，扩展性和维护性也会更好。 比如我要改个导航，直接去找导航组件就好，不用怕误改了其他代码。

其他组件里面也不会看到共用组件里的代码，指定位置就好。可以把重点放在自己的逻辑上面来。

控件

简单的说，就是UI库提供的各种控件，比如表单里的文本框、选择列表框、日期选择控件等，还有表单控件、列表控件、分页控件等。

虽然在vue里面，这些都是组件的形式出现，但是还是可以细分、明确一下，这样不容易产生误解。

本系列主要说的是控件这一类的组件。

我们先用一个简单的文本框来举个例子。

定义组件

<template>
  <input
    :value="modelValue"
    @input="myInput"
  ><br>
  组件内部值：{{modelValue}}
</template>
<script>
import { toRef, toRefs, watch } from 'vue'
export default {
  name: 'mytext',
  props: {
    modelValue: String,
    meta: Object
  },
  emits: ['input'],
  setup (props, context) {
    // 向父组件提交修改属性
    const myInput = (e) => {
      console.log(e)
      context.emit('update:modelValue', e.target.value)
    }
    return {
      myInput
    }
  }
}
</script>
复制代码

• template：模板部分，写html代码和vue的绑定语句。

• script：js脚本部分。

• style：可以写css。

• export default：返回一个对象，用于创建组件。

• name ：组件名称，可以不写这个属性，但是如果要写的话，就不要重名。

• props：定义组件的属性。

• emits：定义组件的事件。

• setup：vue3的新写法。虽然vue3也兼容vue2的方式，但是我们都用上vue3了，那么尽量用新的方式。

父组件里面使用组件

<template>
  <div class="home">
    父组件的值：{{value}}<br>
    自己的组件：<mytext v-model="value"/><br>
    原生文本框：<input type="text" v-model="value"/>
  </div>
</template>
<script>
import { ref } from 'vue'
import mytext from '@/components/nf-html/input-text2.vue'
export default {
  name: 'eleBase',
  components: {
    mytext
  },
  setup () {
    const value = ref('1')
    return {
      value
    }
  }
}
</script>
复制代码

• import

可以用 import  的方式引入组件。

• components

如果组件没有做全局注册的话，那么需要使用 components 在父组件里面注册。

setup 的参数

setup提供两个参数，一个是props，传递组件的属性；一个是context（上下文），提供emit这类的方法。

props

在 setup 里面可以通过 props 访问组件的属性，但是请注意：原则上是不允许在组件内部直接修改属性值的。所以一般可以使用 watch 的方式来监控属性的变化。 但是如果我就是想访问属性呢，结果会如何？ 我们可以设计几个方式来看看效果：

const myProps1 = props // 获取属性
    const myProps = toRefs(props) // toRefs的方式获取属性
    const myValue = toRef(props, 'modelValue') // toRef获取指定的属性
    console.log('原生属性:', props)
    console.log('toRefs的属性:', myProps)
    console.log('toRef 的属性:', myValue)
    console.log('myProps.modelValue:', myProps.modelValue)
    // 直接修改，会报错（ESLint）
    // props.modelValue = '直接改属性'
    // 尝试修改，虽然只有警告不会报错，但是修改不会成功。
    myProps1.modelValue = '内部直接修改'
    // 尝试修改，虽然只有警告不会报错，但是修改不会成功。
    myValue.value = '内部修改属性'
    // 监控属性变化
    watch(() => props.modelValue, (v1, v2) => {
      console.log('原值：', v1)
      console.log('新值：', v2)
    })
复制代码

• 属性的打印结果

从打印结果可以看出来，组件的属性被封装成了reactive的形式，然后又在外面套上了readonly，所以实现了无法直接赋值的效果。

注意：不能修改只是对简单类型有效，如果属性是对象类型的话，还是可以直接修改属性值的。

• 尝试直接赋值。

以前尝试直接赋值的时候会报错，现在虽然不报错了，但是无法修改，而且会给出警告，如

图：

• toRefs 和 toRef

toRefs可以把属性拆分成多个ref的形式，尝试了一下，如果属性是简单类型，还是不可以直接修改值的。但是如果属性类型是对象的话，又可以直接修改值了。

toRef也是一样的效果。

context

我们来看一看context的打印结果：

比较常用的就是emit，相当于vue2的this.emit。

我们可以写一个向父组件提交属性的函数

// 向父组件提交修改属性
    const myInput = (e) => {
      console.log(e)
      context.emit('update:modelValue', e.target.value)
    }
复制代码

• update:modelValue

这是修改父组件的属性的一种方法，后面是要修改的值。

v-model

vue3支持多个v-model了。父组件可以这样写：

v-model:foo="foo" v-model:fo="fo" 
复制代码

如果只需要一个属性的话，也可以简写

v-model="fooo"
复制代码

只是组件内部的属性名称要写成固定的“modelValue”，如果是其他属性名称的话，必须用带冒号的方式。

小结

这个只是一个开篇，介绍基础知识，后面还有更精彩的内容。

源码：

github.com/naturefwvue…