vue组件详解

• 全局组件
  导入方式：在app导入
  使用范围：在全局都可使用，用不用它都在那，性能不高，用起来简单
  命名建议：小写单词，中间用横线间隔
• 局部组件
  导入方式：在父组件内导入
  使用范围：仅能在父组件内使用
  命名建议：建议首字母大写的驼峰命名，用来区分普通的js变量名。在html中需要使用带中划线标签的写法，vue会自动转换语法。

组件间传值

views/login/index.vue

父组件代码：

<template>
  <div class='container'>
    <h1>登录界面</h1>

    <!--  演示静态传参  -->
    <my-input my-username='tom' />

    <!--  演示动态传参  -->
    <my-input :my-age='age' />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import MyInput from './components/Input.vue'

const age = ref(12)
</script>

views/login/components/Input.vue

子组件代码：

<template>
  <div>用户名：{{ myUsername }}</div>
  <div>密码：{{ password }}</div>
  <div>年龄：{{ myAge }}</div>
  <hr>
</template>

<script setup>
import { defineProps } from 'vue'

// 注意这里声明参数的两种写法
defineProps({
  myUsername: String,
  password: { type: String, default: '', validator: (value) => { return value.length > 6 } },
  myAge: { type: Number, default: () => 0, required: true } // default 可以是一个函数
})
</script>

注意

• 静态传参仅能传递字符串类型，传递不了数值类型

• 动态传参可以传递字符串、数值、布尔、数组、对象、函数、Symbol

• 注意子组件接收的props是只读的，不可修改

• 如果父组件传过来的值，子组件没有用props声明的属性且子组件顶层只有一个标签时，那么子组件顶层标签上会继承这些值。一般常用于样式和类。
  如果子组件顶层有多个标签，需要在某个标签内显式声明v-bind=$attrs拿到所有Non-prop属性，或者类似于:username="$attrs.username"拿到具体属性