占位slot

2019独角兽企业重金招聘Python工程师标准>>>

一、为什么我们需要slot

假如我们有个需要，子组件中需要显示一段html内容，显示什么不是由子组件决定，而是由父组件传递什么决定，我们该怎么做

很挫的做法，我们使用组件间的数据传递

父组件向子组件传递数据，使用自定义属性绑定的方式[父组件自定属性，子组件接受自定义属性，我们就可以拿到值了]

	<div id="root">
		<child content="<p>hello world</p>"></child>
	</div>
    <script type="text/javascript">
    	Vue.component('child',{
    		props:['content'],
    		template: `<div>
    		   <p>hello</p>
    		   <div v-html="this.content"></div>
    		 </div>`
    	})

    	new Vue({
    		el:'#root'
    	})
    </script>

这样做的问题是：

子组件件件多多了一个div标签 <div v-html="this.content"></div> 这里的div不可以换成template,会无法渲染
传递的内容少还好，如果我们传递一大段html，这样做是不是很蠢，代码很难阅读

	<div id="root">
		<child content="<p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p>"></child>
	</div>

二、使用slot

<div id="root">
		<child><p>hello world</p></child>
	</div>
    <script type="text/javascript">
    	Vue.component('child',{
    		props:['content'],
    		template: `<div>
    		   <p>hello</p>
    		   <slot></slot>
    		   `
    	})

    	new Vue({
    		el:'#root'
    	})
    </script>

slot插槽处，就会被子组件中间的内容直接替换。我们像子组件中插入了一点东西，需要有插入的地方，那个地方就叫做插槽。

三，slot默认值

<slot>默认值</slot>

slot中间的内容就是默认值，但我们不想插槽插入东西的时候，他就是显示默认值。

四，多个插槽（具名插槽）

当有多个插槽的时候，我们为了区分需要给插槽取个名字,也就是具备名字的插槽

slot属性

name属性

<div id="app">
      <contents>
         <div class="header" slot="header">header</div>
         <div class="footer" slot="footer">footer</div>
      </contents>
	</div>
   <script type="text/javascript">

      Vue.component('contents',{

         template:`
         <div >
         <slot  name="header"></slot>
         <div class="content">content</div>
         <slot  name="footer"></slot>
         </div>`,
          methods:{
            show:function(){
            }
         },
         mounted:function(){
           
         }

五，插槽的作用

总结：插槽的作用：更方便的向子组件传递DOM元素

使用场景：第三方插件中大量使用,比如element 父组件向子组件传递DOM结构的时候大量使用

转载于:https://my.oschina.net/2016jyh/blog/1834100