<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>vue基础扩展8--solt详解</title>
</head>
<body>
<!---
一、旧的插槽
概述:插槽是什么? 顾明思意就是,在组件内定义了一个占位符,可以用来拿到组件包裹的内容进行渲染。
或者说我们在使用组件时,在组件内填写的元素会在组件内部定义的solt标记渲染。
1、旧的api
方式1: 组件内<solt></solt>, 使用:组件标签包裹内容即solt内容。
方式2: 组件内<solt name="xx"><solt>, 使用:包裹内容内: <element solt="xx"> <element>
方式3: 组件内<solt :todo="todo">,使用:在方式2基础上通过<template slot-scope="scope"> scope.todo 传递绑定的属性
-->
<!--2、旧的api综合使用案例-->
<div id="app">
<slot2 :msg="msg">
<div slot="head">我是头</div>
<div slot-scope="scope">我是默认:{
{scope.msg}}</div&g
vue基础扩展8--solt详解
本文详细探讨了Vue.js中slot的概念及其用法,包括默认slot、具名slot、作用域slot等,旨在帮助开发者更好地理解和利用组件间的交互功能。
摘要由CSDN通过智能技术生成