2022/9/3 具名插槽定义和使用,基本用法,插槽解构,用插槽优化购物车，自定义指令（局部+全局）

具名插槽定义和使用

带名字的插槽就叫具名插槽

 例如:在某组件内声明定义一个slot插槽带上name名称

    <!-- 文章标题 -->
    <div class="header-box">
        <slot name="title"></slot>
    </div>

<Article>
    <template #title>
      <h3>哈哈</h3>
     </template>
</Article>

在App.vue内引用带上 #{name} 即可

 作用域插槽的基本用法

 在子组件内声明了一个msg

    <!-- 内容 -->
    <div class="content-box">
        <slot name="content" msg="Hello Vue"></slot>
    </div>

在父组件声明的标签内引入obj就是显示作用域,obj可以更改（属于形参）,上下一致即可

 <template #content='obj'>
        <div>
        <p>哈哈哈哈哈</p>
        <p>{
   {obj.msg}}</p>
        </div>

作用域插槽解构用法 

 在子组件内声明一个data对象

<script>
export default {
 name : 'Article',
 data(){
    return {
        userinfo : {
            name : 'za',
            age : 20
        }
    }
 }
}
</script>

在子组件的slot插槽内绑定一个动态属性:user='data内的对象'

  <div class="content-box">
        <slot name="content" msg="Hello Vue" :user="userinfo"></slot>
    </div>

在父组件APP.vue内解构

  <template #content={user}>
        <div>
        <p>{
   {user}}</p> 
        <!--<p>{
   {user.name}}</p>   指定解构内容-->
        </div>
        </template>

更改(插槽方式)9/1~9/2购物车的增加模块

减购物车按钮做完了没存进，照葫芦画瓢就可以 

APP.VUE

<template>
  <div class="app-container">
    <!-- Header 头部区域 -->
    <Header title="购物车案例"></Header>
    <!-- 循环渲染每一个商品的信息 -->
    <