Vue 3 迁移策略笔记—— 第12节:片段

前言

本笔记主要基于官方文档《迁移策略—— 片段》汇总而来。如有理解出入,请以官方文档为主。建议您以官方文档为主,本文为辅。这样您可以“以自己为主”审视的阅读,从而不被我的观点带偏。

概述

Vue 3.x 支持组件内多个根节点,也就是片段!

Vue 2.x 组件写法

在 Vue 2.x,组件不支持多根节点。所以,组件的写法只能如下:

<template>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</template>

Vue 3.x 组件写法

在 Vue3.x 中,Vue 对组件的写法做了调整,允许组件有多个根节点。但是,需要开发人员明确定义属性应该由哪个根节点继承。

<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>

Vue 3.x 属性继承

单根节点自动继承属性

当组件内只有一个根节点时,将自动向根节点的属性添加非prop属性。如下:

定义date-picker组件:

app.component('date-picker', {
  template: `
    <div class="date-picker">
      <input type="datetime" />
    </div>
  `
})

如下调用:

<date-picker data-status="activated"></date-picker>

最终渲染的结果:

<div class="date-picker" data-status="activated">
  <input type="datetime" />
</div>

禁止根节点自动继承属性

有的时候,我们并不希望根节点继承属性而是在根节点以外的其他元素继承属性。可以这么做:

  1. 禁止根节点自动继承属性:组件的Option添加inheritAttrs: false
  2. 在需要继承属性的元素添加v-bind:$attrs
app.component('date-picker', {
  inheritAttrs: false,
  template: `
    <div class="date-picker">
      <input type="datetime" v-bind="$attrs" />
    </div>
  `
})

多根节点不自动继承属性

与单根节点组件不同,具有多个根节点的组件不会自动继承属性。我们需要显式设定由谁来继承。 如果未显式绑定$attrs,则将发出一个运行时警告。

app.component('custom-layout', {
  template: `
    <header>...</header>
    <main v-bind="$attrs">...</main>
    <footer>...</footer>
  `
})

本系列目录

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值