Vue3学习笔记（6.0）

Vue3组件

组件（Component）是Vue.js最强大的功能之一。

组件可以扩展HTML元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。

每个Vue应用都是通过用createApp函数创建的，传递给createApp的选项用于配置根组件。当我们挂载应用时，该组件被用作渲染的起点。一个应用需要被挂载到一个DOM元素中。

以下实例我们将Vue应用挂载到

，应该传入#app：

const RootComponent={/*  选项*/}
const app=Vue.createApp(RootComponent)
const vm=app.mount('#app')

注册一个全局组件语法格式如下：

const app =Vue.createApp({...})
app.component('my-component-name',{

/*      */
})

my-component-name为组件名，/* */部分为配置选项。注册后，我们可以使用以下方式来调用组件：

 

 组件的复用

我们可以将组件进行任意次数的复用

同样的代码，搞起

 全局组件

上面的示例中我们的组件都是通过component全局祖册的。

全局注册的组件可以在随后创建的app示例模板中使用，也包括实例组件树中的所有子组件的模板中。上面的基尼太美就是

下面看局部组件

全局祖册往往是不够理想的。比如，如果你使用一个像webpack这样的构建系统，全局注册所有的组件意味着即使你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这就造成了用户下载的JavaScript的无谓的增加。

在这些情况下，我们可以通过一个普通的JavaScript对象来定义组件：

const ComponentA={





}

在components选项中定义我们想要使用的组件：
 

const app=Vue.createApp({
components:{
'component-a':ComponentA,
'component-b':ComponentB,}})

对于components对象的每个属性来说，其属性名就是自定义元素的名字（component-a、component-b），其属性值就是这个组件的选项对象（ComponentA、ComponentB）。

我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：

 Prop是子组件用来接受父组件传递过来的一个自定义属性

父组件的数据需要通过props把数据传给子组件，子组件需要显式地用props选项声明“prop”：

 一个组件默认可以拥有任意数量的prop，任何值都可以传递给任何prop。

动态Prop

类似于用v-bind绑定HTML特性到一个表达式，也可以用v-bind动态绑定props的值到父组件的数据中。每当父组件的数据变化时，该变化也会传到给子组件：

 Prop验证

组件可以为props指定验证要求。

为了定值prop的验证方式，我们可以为props中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

当prop验证失败时，Vue将会产生一个控制台警告。

type可以是以下原生构造器：

string number Boolean Array Object Date Function Symbol

type也可以是一个自定义构造器，使用instanceof检测。