• vue插槽 slot 插槽之间的父子传参


    原始地址:https://segmentfault.com/a/1190000012996217

    插槽:slot,是组件的一块HTML模板,这块模板显示不显示、以及怎样显示由 父组件来决定。 实际上,一个slot最核心的两个问题这里就点出来了,是显示不显示怎样显示

          显不显示和怎样能够显示由父组决定

          非插槽模板指的是html模板,指的是‘div、span、ul、table’这些,非插槽模板的显示与隐藏以及怎样显示由插件自身控制;

          插槽模板是slot,它是一个空壳子,因为它显示与隐藏以及最后用什么样的html模板显示由父组件控制。但是插槽显示的位置确由子组件自身决定,slot写在组件template的哪块,父组件传过来的模板将来就显示在哪块

    自己的话讲:非插槽模板,自己决定自己显示,插槽:父级决定子级显示;

    一,单个插槽:没有name属性。一个组件只能用一次,slot 没有name又叫匿名插槽。

      匿名插槽,子组件被引入父组件的时候,被父组件使用了,子组件需要一个<slot/>来占位,有名字的占位,叫具名插槽

    例如:子组件:<slot></slot>

        父组件:<chlid>

             <div>999999</div>   //div的内容代替了子组件的匿名插槽   【父组件<div>999999</div> ===子组件<slot></slot>】

            </child>

    自己话说:<slot></slot>在子组件中,在父组件中的子组件中显示,但仍然属于子组件。单纯的占个位置slot

    二,具名插槽:有name属性,一个页面你可以使用多次,只要名字不同就行了,slot 加了name属性,就叫具名插槽;

        父组件通过html模板上的slot属性关联具名插槽。没有slot属性的html模板默认关联匿名插槽。

         父组件:<div slot="up">

         <span>菜单1</span>

         <span>菜单2</span>

         <span>菜单3</span>

         </div>

        子组件: <slot name='up'></slot>

    作用域插槽:子组件通过属性<slot  :自定义属性名=‘值’></slot>,将自己内部的原始类型给到父组件;

          父组件<template  slote-scope='自定义接收'></template>  共同点是由slot这个单词

          子组件 slot 除了要占个位置还要传递参数,父组件slote-scope负责接收参数。

  • 相关阅读:
    文件操作
    set集合,深浅拷贝
    is 和 == 区别 id()函数
    字典
    列表
    基本数据类型
    第十二章 if测试和语法规则
    第十一章 赋值、表达式和打印
    第十章 python语句简介
    第九章元组、文件及其他
  • 原文地址:https://www.cnblogs.com/maibao666/p/11346535.html
Copyright © 2020-2023  润新知