内置特殊元素 ​

` {#component}"">​

一个用于渲染动态组件或元素的“元组件”。

• Props

  ts

  interface DynamicComponentProps {
    is: string | Component
  }

• 详细信息

  要渲染的实际组件由isprop 决定。

  • 当is是字符串，它既可以是 HTML 标签名也可以是组件的注册名。

  • 或者，is也可以直接绑定到组件的定义。

• 示例

  按注册名渲染组件 (选项式 API)：

  vue

  
  import Foo from './Foo.vue'
  import Bar from './Bar.vue'
  
  export default {
    components: { Foo, Bar },
    data() {
      return {
        view: 'Foo'
      }
    }
  }
  
  
  
    
  

  按定义渲染组件 (组合式 API)：

  vue

  
  import Foo from './Foo.vue'
  import Bar from './Bar.vue'
  
  
  
    
  

  渲染 HTML 元素：

  template

  内置组件都可以传递给is，但是如果想通过名称传递则必须先对其进行注册。举例来说：

  vue

  
  import { Transition, TransitionGroup } from 'vue'
  
  export default {
    components: {
      Transition,
      TransitionGroup
    }
  }
  
  
  
    
      ...
    
  

  如果将组件本身传递给is而不是其名称，则不需要注册，例如在中。

  如果在标签上使用v-model，模板编译器会将其扩展为modelValueprop 和update:modelValue事件监听器，就像对任何其他组件一样。但是，这与原生 HTML 元素不兼容，例如或。因此，在动态创建的原生元素上使用v-model将不起作用：

  vue

  
  import { ref } from 'vue'
  
  const tag = ref('input')
  const username = ref('')
  
  
  
    
    
  

  在实践中，这种极端情况并不常见，因为原生表单字段通常包裹在实际应用的组件中。如果确实需要直接使用原生元素，那么你可以手动将v-model拆分为 attribute 和事件。

• 参考动态组件

` {#slot}"">​

表示模板中的插槽内容出口。

• Props

  ts

  interface SlotProps {
    /**
     * 任何传递给  的 prop 都可以作为作用域插槽
     * 的参数传递
     */
    [key: string]: any
    /**
     * 保留，用于指定插槽名。
     */
    name?: string
  }

• 详细信息

  元素可以使用nameattribute 来指定插槽名。当没有指定name时，将会渲染默认插槽。传递给插槽元素的附加 attributes 将作为插槽 props，传递给父级中定义的作用域插槽。

  元素本身将被其所匹配的插槽内容替换。

  Vue 模板里的元素会被编译到 JavaScript，因此不要与原生元素进行混淆。

• 参考组件 - 插槽

` {#template}"">​

当我们想要使用内置指令而不在 DOM 中渲染元素时，标签可以作为占位符使用。

• 详细信息

  对的特殊处理只有在它与以下任一指令一起使用时才会被触发：

  • v-if、v-else-if或v-else
  • v-for
  • v-slot

  如果这些指令都不存在，那么它将被渲染成一个原生的元素。

  带有v-for的也可以有一个key属性。所有其他的属性和指令都将被丢弃，因为没有相应的元素，它们就没有意义。

  单文件组件使用顶层的标签来包裹整个模板。这种用法与上面描述的使用方式是有区别的。该顶层标签不是模板本身的一部分，不支持指令等模板语法。

• 参考

  • 指南 -上的v-if
  • 指南 -上的v-for
  • 指南 - 具名插槽

图片声明：本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!