vue的 slot插槽

1.槽模板是slot,它是一个空壳子,因为它显示与隐藏以及最后用什么样的html模板显示由父组件控制。但是插槽显示的位置由子组件自身决定,slot写在组件template的哪块,父组件传过来的模板将来就显示在哪块。这样就使组件可复用性更高,更加灵活。我们可以随时通过父组件给子组件加一些需要的东西

对于任何一个组件,从模板种类的角度来分,其实都可以分为非插槽模板和插槽模板两大类。非插槽模板指的是html模板,比如'DIV,跨度,UL,表'这些,插槽模板就是指slot模板,

具体用法如下:

父组件代码:

<div id="app">
    <div>
      <!-- 单slot -->
      <v-one>
        <p>初始化段落一</p>
        <p>初始化段落二</p>
      </v-one>


      <!-- 具名slot -->
      <v-two>
        <p slot="nav">我是导航</p>
        <p slot="main">我是内容</p>
        <p slot="footer">我是底部</p>
      </v-two>


      <!-- 作用域插槽 -->
      <v-three>
      <!-- 父组件默认无法使用子组件数据 -->
          <template scope="props">
              <p>{{props.text}}</p>
          </template>
      </v-three>
    </div>
  </div>

子组件代码:

<template id="one">
    <div>
      <h1>组件标题</h1>
      <slot></slot>
      <p>组件段落内容</p>
      <p>I am one</p>
    </div>
  </template>


  <!-- 具名slot -->
  <template id="two">
    <div>
      <nav>
        <slot name="nav"></slot>
      </nav>
      <main>
        <slot name="main"></slot>
      </main>
      <footer>
        <slot name="footer"></slot>
      </footer>
    </div>
  </template>

<!-- 作用域插槽 -->
  <template id="three">
    <div>
        <!-- 把数据传递给slot,这样父组件也可以访问three这个组件的数据
                        :text="three"对应值为three:"i am three"-->
      <slot :text="three"></slot>
    </div>
  </template>

 效果:

---------------------------------------------

2.input标签中的 

      autocomplete="off"

input 的属性autocomplete 默认为on,其含义代表是否让浏览器自动记录之前输入的值,很多时候,需要对客户的资料进行保密,防止浏览器软件或者恶意插件获取到,可以在input中加入autocomplete="off" 来关闭记录,系统需要保密的情况下可以使用此参数

猜你喜欢

转载自blog.csdn.net/qq_41063141/article/details/82932417