vue组建开发-solt

时间 2019-11-20

标签 vue 组建开发 solt 繁體版

原文原文链接

使用组件的时候，常常须要在父组件中为子组件中插入一些标签等。固然其实能够经过属性等操做，可是比较麻烦，直接写标签仍是方便不少。那么Vue提供了slot协助子组件对父容器写入的标签进行管理。html

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

好比下面的例子：app

<!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: 'flydragon@gmail.com'
      }
    });
  </script>
</body>
</html>

最终结果：code

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

<div> <h1>这里是子组件</h1> <hr> flydragon@gmail.com </div>htm

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