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" 来关闭记录,系统需要保密的情况下可以使用此参数