vue中插槽作用域的使用

2023-04-27,,

一、插槽作用

  1、简单来说就是带参数的插槽;

  2、使用方式:

    在组件标签内部加一个template标签 在template标签上加一个属性scope 值随意书写

    在组件内部用slot进行接受,如果给slot加一个自定义属性,那么在组件标签的template的scope上面就可以进行接受到。
 
  3、例父组件 App.vue 中 

<template>
<div id="app">
<header-com>
<template scope="data">
<h2>{{data.mytitle}}</h2>
</template>
</header-com> </div>
</template>

  子组件 one.vue 中

<template>

    <div>

        <header>vue</header>
<slot :mytitle="message"></slot>
</div>
</template> <script>
export default {
data() {
return {
message: "vue马上要改版本了,纠结。。"
};
}, }
</script> <style>
</style>

vue中插槽作用域的使用的相关教程结束。

《vue中插槽作用域的使用.doc》

下载本文的Word格式文档,以方便收藏与打印。