插槽样式_vue-插槽2

1.编译作用域

父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。在开发阶段{{ head }}在哪就是哪的责任，不是最终在哪呈现是哪的责任。

主页面传递

<template>
  <div> 
    App
      <Slots>
          <template v-slot:head>
              头部：{{ head }}
          </template>
          <template v-slot:body>
            身体
          </template>
          <template v-slot:foot>
            底部
          </template>
      </Slots>
  </div>
 </template>
<script>
import Slots from './Slots'
export default {
  name:"App",
  data(){
    return{
      head:"我是头部"
    }
  },
  compinents:{
   Slots 
  }
}
</script>
<style>
</style>

slots页面呈现

<template>
  <div>
    <div>
       <slot nema="head"></slot>
    </div>
     <div>
       <slot nema="body"></slot>
    </div>
    <div>
       <slot nema="foot"></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Slots',
}
</script>
<style>
</style>

2.作用域插槽

实现头部字体变大，在子模板里<slot nema="head"></slot> 只是加载作用,不能改变样式,要想改变只能到父模板里。很简单的一个理解方案就是当我们使用插槽的时候，其实就是儿子的数据交给父亲渲染，最终在交给儿子呈现。

主页面传递

<template>
  <div> 
    App
      <Slots>
          <template v-slot:head>
            <div class="head">
              头部：{{ head }}
            </div>
          </template>
          <template v-slot:body>
            身体
          </template>
          <template v-slot:foot>
            底部
          </template>
      </Slots>
  </div>
 </template>
<script>
import Slots from './Slots'
export default {
  name:"App",
  data(){
    return{
      head:"我是头部"
    }
  },
  compinents:{
   Slots 
  }
}
</script>
<style>
.head{
  font-size:20px;
}
</style>

slots页面呈现

<template>
  <div>
    <div>
       <slot nema="head"></slot>
    </div>
     <div>
       <slot nema="body"></slot>
    </div>
    <div>
       <slot nema="foot"></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Slots',
}
</script>
<style>
</style>

理解了作用域插槽，我们来看怎么传递数据。

在子元素定义好数据，通过<slot v-bind></slot> 的方式传递给父元素，父元素通过v-slot:default 来接收数据，然后在子元素呈现。不知道有没有经过父元素就在父元素里加一个样式。

子页面呈现

<template>
  <div>
    <div>
       <slot nema="head"></slot>
    </div>
     <div>
     //传递数据
       <slot nema="body" :msg="msg"></slot>
    </div>
    <div>
       <slot nema="foot"></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Slots',
  data(){
    return{
      msg:"我是子页面"
    }
  }
}
</script>
<style>
</style>

主页面传递

<template>
  <div> 
    App
      <Slots>
          <template v-slot:head>
            头部
          </template>
          //接收数据，这个时候发现有两给v-slot就会冲突，所以换一种方式
          //<template v-slot:body v-slot:default="data">
          <template v-slot:body="data">
            <div class="mybody">//添加字体为红色
              身体：{{ data.msg }}
            </div>
          </template>
          <template v-slot:foot>
            底部
          </template>
      </Slots>
  </div>
 </template>
<script>
import Slots from './Slots'
export default {
  name:"App",
  compinents:{
   Slots 
  }
}
</script>
<style>
.mybody{
  color:red;
}
</style>