zoukankan      html  css  js  c++  java
  • 使用slot分发内容

    为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件的模板。这个过程被称为 内容分发

    使用特殊的<slot>元素作为原始内容的插槽

    除非子组件模板包含至少一个<slot>插口,否则父组件的内容将会被丢弃。当子组件只有一个没有属性的slot时,父组件整个内容片断将插入到slot所在DOM位置,并替换掉slot标签本身。

    最初在<slot>标签中的任何内容都被视为 备用内容。备用内容在子组件的作用域内编译。并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容。

    具名 Slot

    <slot> 元素可以用一个特殊的属性 name来配置如何分发内容。多个slot可以用不同的名字。具名slot将匹配内容片断中有对应slot特性的元素。

    仍然可以有一个匿名 slot,它是默认 slot,作为找不到匹配的内容片段的备用插槽。如果没有默认的 slot,这些找不到匹配的内容片段将被抛弃。

    子组件索引

    尽管有props和events,但是有时任然需要在javascript中直接访问子组件。为此可以使用ref为子组件指定一个索引ID,

    <div id="parent">

      <user-profile ref="profile"></user-profile>

    </div>

    var parent=new Vue({el:'#parent'});

    var child=parent.$refs.profile,

    当 ref 和v-for一起使用时,ref是一个数组,包含相应的子组件。

    $refs 只在组件渲染完成后才填充,并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案——应当避免在模板或计算属性中使用 $refs

    这意味着 PascalCase 是最通用的 声明约定 而 kebab-case 是最通用的 使用约定

  • 相关阅读:
    Extension Methods(扩展方法)
    linux面试题
    渗透测试 day4
    渗透测试 day3
    渗透测试 day2
    渗透测试 day1
    9.3 网络安全介绍
    9.2 Iptables
    8.30 进程管理
    8.29 linux的网络
  • 原文地址:https://www.cnblogs.com/xiaofenguo/p/7474395.html
Copyright © 2011-2022 走看看