作用域插槽

作用域插槽主要作用是可以替换掉组件中的样式标签,自己定义新的样式,标签

  • 第一步在组件中绑定一个属性,将需要传递的数据进行绑定
  • 第二步在调用组件的时候通过slot-scope=“”来绑定数据
  • 第三部可以进行使用
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
  <cpn>
<!--    通过slot-scope获取子组件的数据 -->
    <template slot-scope="data">
      <span v-for="item in data.data">{{item}}</span>
    </template>
  </cpn>
  <cpn>
    <template slot-scope="slot">
      <span>{{slot.data.join(' - ')}}</span>
    </template>
  </cpn>

</div>
<script src="../vue.js"></script>
<template id="cpn">
  <div>
<!--    子组件通过绑定数据,可以最后传递到父组件中的slot中-->
    <slot :data="pLanguage">
      <ul>
        <li v-for="item in pLanguage">{{item}}</li>
      </ul>
    </slot>
  </div>
</template>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello'
    },
    components: {
      cpn: {
        template: '#cpn',
        data() {
          return{pLanguage: ['java','Python','javascript','Go']}
        }
      }
    }
  })
</script>
</body>
</html>
上一篇:厉害了!百度开源的分布式唯一ID生成器UidGenerator分分钟解决时钟回拨问题


下一篇:redis集群存储机制