.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)
})
-
属性的打印结果
002setup-propsKind.png
从打印结果可以看出来，组件的属性被封装成了reactive的形式，然后又在外面套上了readonly，所以实现了无法直接赋值的效果。
注意：不能修改只是对简单类型有效，如果属性是对象类型的话，还是可以直接修改属性值的。
-
尝试直接赋值。
以前尝试直接赋值的时候会报错，现在虽然不报错了，但是无法修改，而且会给出警告，如图：
002setup-props1.png
-
toRefs 和 toRef
003setup-propsTorefs.png
toRefs可以把属性拆分成多个ref的形式，尝试了一下，如果属性是简单类型，还是不可以直接修改值的。但是如果属性类型是对象的话，又可以直接修改值了。
toRef也是一样的效果。
context
我们来看一看context的打印结果：
001setup-context.png
比较常用的就是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”，如果是其他属性名称的话，必须用带冒号的方式。
小结
这个只是一个开篇，介绍基础知识，后面还有更精彩的内容。
网友评论