Vue默认插槽,具名插槽,作用域插槽定义及使用方法

#Vue默认插槽,具名插槽,作用域插槽定义及使用方法| 来源: 网络整理| 查看: 265

Vue默认插槽,具名插槽,作用域插槽定义及使用方法,插槽,组件,内容,数据,位置

易采站长站，站长之家为您整理了Vue默认插槽,具名插槽,作用域插槽定义及使用方法的相关内容。

目录一、三种插槽的定义1.默认插槽2.具名插槽3.作用域插槽二、使用方法1.默认插槽2.具名插槽3.作用域插槽

应用场景：

插槽的作用是在子组件中某个位置插入父组件的自定义html结构和data数据

一、三种插槽的定义

插槽分为三种：

默认插槽具名插槽作用域插槽

1.默认插槽

【定义：默认插槽是将父组件的结构和数据插入子组件中，默认插槽只有一个插入位置，要插入的html结构和data数据必须在父组件中，不过css可以在子组件中】【简述：将父组件的自定义html和data插入子组件的对应位置】【特点：www.easck.com父组件决定结构和数据】

2.具名插槽

【定义：具名插槽和默认插槽类似，只是默认插槽只有一个插入位置，具名插槽可以有多个插入位置】【简述：将多个父组件的自定义html和data插入子组件的多个位置】【特点：父组件决定结构和数据】

3.作用域插槽

【定义：作用域插槽的data数据固定写在子组件中，数据的html结构根据父组件传入的html结构来决定】【简述：根据父组件中不同的html结构解析data中的数据】【特点：子组件决定数据，父组件决定结构】

二、使用方法1.默认插槽

父组件：

要插入的html内容

子组件：

插槽未被调用时会显示此内容 2.具名插槽

父组件：

要插入的html内容1 要插入的html内容2 要插入的html内容3

子组件：

插槽未被调用时会显示此内容插槽未被调用时会显示此内容插槽未被调用时会显示此内容 3.作用域插槽

父组件：

zvAiMPyTV &l易采站长站t;label v-for="m in data.msg" :key="m">

子组件：

插槽未被调用时会显示此内容 export default { name: 'Child', // 公用数据 data() { return { msg: ["火锅", "红烧肉", "烤羊腿"] } } }以上就是关于对Vue默认插槽,具名插槽,作用域插槽定义及使用方法的详细介绍。欢迎大家对Vue默认插槽,具名插槽,作用域插槽定义及使用方法内容提出宝贵意见

【本文地址】

公司简介

联系我们