vue组建开发-solt

使用组件的时候，经常需要在父组件中为子组件中插入一些标签等。当然其实可以通过属性等操作，但是比较麻烦，直接写标签还是方便很多。那么Vue提供了slot协助子组件对父容器写入的标签进行管理。

当父容器写了额外的内容时，如果子组件恰好有一个slot标签，那边子容器的slot标签会被父容器写入的内容替换掉。

比如下面的例子：

<!DOCTYPE html>
<<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入门之extend全局方法</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <!--父容器输入标签-->
    <my-slot>
      <h3>这里是父容器写入的</h3>
    </my-slot>

    <!--父容器绑定数据到子容器的slot,这里的作用域是父容器的啊。-->
    <my-slot>{{ email }}</my-slot>

    <!--父容器什么都不传内容-->
    <my-slot></my-slot>
  </div>
  <script>
    // 反引号：可以定义多行字符串。
    var temp = `
      <div>
        <h1>这里是子组件</h1>
        <hr>
        <slot>slot标签会被父容器写的额外的内容替换掉，如果父容器没有写入任何东西，此标签将保留！</slot>
      </div>
    `;
    Vue.component('MySlot', {          // 如果定义的组件为MySlot，那么用组件的时候：<my-slot></my-slot>
      template: temp,
    });
    // 初始化一个Vue实例
    var app = new Vue({
      el: '#app',
      data: {
       email: '[email protected]'
      }
    });
  </script>
</body>
</html>

最终结果：

<div id="app"> <div> <h1>这里是子组件</h1> <hr> <h3>这里是父容器写入的</h3> </div>

<div> <h1>这里是子组件</h1> <hr> [email protected] </div>

<div> <h1>这里是子组件</h1> <hr> slot标签会被父容器写的额外的内容替换掉，如果父容器没有写入任何东西，此标签将删除！ </div> </div>

猜你喜欢