vue 使用Slot 分发内容及props数据传递

我对solt的理解是当组件中某一项需要单独定义，那么就应该使用solt。举例说明。例如项目中需要一个模态框提示付款成功，付款失败。那么这个模态框也就仅仅差这几个字或者是状态图片而已。那么此时应用solt就是一个非常不错的选择。
最初在 <slot> 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。

单个slot情况

//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <ol>
    <children :todo="sites">
      <span>你是谁</span>
    </children>
    </ol>
</div>
<!-- <slot><a href="">默认效果</a></slot> -->
<script>
new Vue({
  el: '#app',
  components:{
    'children':
     {
      props: ['todo'],
      template: '<div><li>{{ todo }}</li></div>'
    }
  },
  data: {
    sites:  'Runoob' 
  }
})
</script>
</body>
</html>

输出结果：

我们发现写在 children模板内部的span被默认删除了。如果想让span显示那么此刻就应该使用slot。
代码实例：对index.html的代码做如下修改

//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <ol>
    <children :todo="sites">
      <span>你是谁</span>
    </children>
    </ol>
</div>
<script>
new Vue({
  el: '#app',
  components:{
    'children':
     {
      props: ['todo'],
      template: '<div><li>{{ todo }}</li><slot><a href="">默认效果</a></slot></div>'
    }
  },
  data: {
    sites:  'Runoob' 
  }
})
</script>
</body>
</html>

那么此时span标签的内容就被渲染出来了。如果在childrem中如果不写span标签那么slot默认会渲染slot里面的内容。

具名slot

上面案例中讲解的是当组件的模板中有一个slot的方法，那么一个组件中如果想使用多个slot那么此时就应该使用具名slot。<slot> 元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素。仍然可以有一个匿名 slot ，它是默认 slot ，作为找不到匹配的内容片段的备用插槽。如果没有默认的 slot ，这些找不到匹配的内容片段将被抛弃。
代码实例：对index.html的代码做如下修改：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <ol>
    <todo-item :todo="sites">
      <div slot="header">
        <p>我是header</p>
      </div>
      <div>
        这个是默认的没有具名的solt
      </div>
      <div slot="footer">
          <p>我是footer</p>
      </div>
    </todo-item>
  </ol>
</div>
<script>
new Vue({
  el: '#app',
  components:{
    'todo-item':
     {
      props: ['todo'],
      template: '<div><slot name="header"><a href="">默认效果1</a></slot><li>{{ todo }}</li><slot name="footer"><a href="">默认效果2</a></slot></div>'
    }
  },
  data: {
    value:"",
    sites: 'Runoob',
  }
})
</script>
</body>
</html>

给slot添加事件并通过props将改变的数据value值传递给子组件children

代码实例：对index.html的代码做如下修改：

//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <ol>
    <todo-item :todo="sites" :getvalues="value">
      <div slot="header">
        <p @click="clickme">{{value}}</p>
      </div>
      <div>
        这个是默认的没有具名的solt
      </div>
      <div slot="footer">
          <p>我是footer</p>
      </div>
    </todo-item>
  </ol>
</div>
<script>
new Vue({
  el: '#app',
  components:{
    'todo-item':
     {
      props: ['todo','getvalues'],
      template: '<div><slot name="header"><a href="">默认效果1</a></slot><li>{{ todo }}----{{getvalues}}</li><slot name="footer"><a href="">默认效果2</a></slot></div>'
    }
  },
  data: {
    value:"空空如也",
    sites: 'Runoob',
  },
  methods:{
    clickme(){
      this.value="我是传过来的header";
    }
  }
})
</script>
</body>
</html>

点击“点我试试”后结果如下如所示：

最后编辑于：2019.03.15 15:40:24