内容分发solt

对于内容分发,官网上有详细的解释,http://cn.vuejs.org/v2/guide/components.html#%E4%BD%BF%E7%94%A8-Slot-%E5%88%86%E5%8F%91%E5%86%85%E5%AE%B9

这里简单直接的说下solt的用法。先上代码。

一、直接上demo

父组件:

<template>
  <div id="home" class="testDiv">
    <HeaderTop>
      <div id="headd" slot="head1">head1head1</div>
      <div id="headdd" slot="head3">head3</div>
    </HeaderTop>
  </div>
</template>
<script>
  import HeaderTop from '../../components/header/header.vue'
export default{
  name:'home',
  components:{
      HeaderTop
  },
  data(){
      return{
      }
  },
}

</script>
子组件

<template>
  <div id="headcon">
    <slot name="head1"></slot>
    <section>aaaaaaaaaa</section>
    <slot name="head2"><button>按钮按钮</button></slot>
    <slot name="head3"><button>按钮按钮222</button></slot>
  </div>
</template>
<script>
  export default{
      name:'header'
  }
</script>  
做一下简单的解释。父组件中的 slot指向子组件的name,父组件的solt="head1" 对应的就会替换子组件 name="head1"的位置。对于子组件来说,写好name之后,可以在slot里面写一个默认值,如果父组件没有对应的内容分发进来,就会展示这个默认值。

二、作用域

被分发的内容的作用域,根据其所在模板决定,例如,以上标签,其在父组件的模板中(虽然其被子组件的children标签所包括,但由于他不在子组件的template属性中,因此不属于子组件),则受父组件所控制。

三、子组件传值

父组件
    <HeaderTop>
      <template scope="props" slot="pp1">
        <div id="aa">
          {{props.text}}
        </div>
      </template>
      <template scope="props" slot="pp2">
        <div id="a2">
          {{props.text}}
        </div>
      </template>
    </HeaderTop>
子组件

<template>
  <div id="headcon">
    <slot text="hello from child" name="pp1"></slot>
    <slot text="hello from child222" name="pp2"></slot>
  </div>
</template>
<script>
  export default{
      name:'header'
  }
</script>
父组件中scope的值对应一个临时变量名,此变量接收从子组件中传递的 prop 对象。

随机浏览