vue 插槽

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

1、Slot

      使用插槽目的：解决组件之间的内容通信，插槽也可以作为父子组件之间通信的另一种实现方式

   <slot></slot>：相当于一个占位符，例如：

     结果：

2、缺省内容

      在子组件内部使用<slot>元素时，可以给该元素指定一个内容，若父组件没有提供插槽内容，则渲染效果中的内容为该元素指定的内容，如果父组件提供了插槽内容，则渲染效果的内容为父组件提供的值

3、父级作用域通过具名插槽与子组件通信

    如果想通过插槽向组件传递动态数据，需考虑编译的作用域问题：父组件模板中的所有内容都是在父级作用域内编译；子组件模板中的所有内容都是在子作用域内编译。

   为了解决在父级的插槽内容中访问子组件的数据，可在子组件的<slot>元素上使用v-bind指令绑定一个prop，例如：

   在父级作用域下使用该组件时，可以用v-slot指令来命名子组件提供的插槽名称

父级作用域只是给默认插槽提供内容，这种情况下可以省略<template>元素，default参数也可以省略，但不能和命名的插槽混合使用

子组件：

   

    slotProps（父级作用域中的插槽名）是随便取的，代表包含my-button（子组件）内所有插槽prop的一个对象（集合），然后可以用这个对象访问my-button的任一插槽prop，由于子组件中的slot元素绑定了titles数据属性对象（集合），所以可以进一步访问对象中的数据属性，渲染效果为<button>注册</button>

   作用域插槽的内部工作原理是将插槽内容包装到传递单个参数的函数中来工作，如下：

 function(slotProps){

//插槽内容

}

  这意味着v-slot的值实际上可以是函数定义中的参数的js表达式，所以满足ECMAS6中的解构语法，如下：

没使用ECMAS6： 

<my-button v-slot="slotProps">

{{slotProps.values.register}}

</my-button>

使用了ECMAS6提取特定组件的prop：

<my-button v-slot="{values}">

{{values.register}}

</my-button>

当子组件的插槽提供了多个prop的时候，可以与对象解构语法中的重命名对象属性一样，提取插槽prop的时候也可以重命名，如下：

<my-button v-slot="{values:titles}">

{{titles.register}}

</my-button>

以上是 vue 插槽 的全部内容， 来源链接： utcz.com/z/378339.html

回到顶部