探索Vue的组件世界-组件设计

目录

插槽

 Slot简单应用

最佳实践

---

插槽

Web Components规范草案

右边的slot是默认值，左边可以编辑自定义这个区域dom

插槽作用域

父级模板里的所有内容都是在父级作用域中编译的；

子模板里的所有内容都是在子作用域中编译的。

外部修改，内部稳定

 Slot简单应用

// IndexPage.vue
<template>
  <div>
    <layout>
      <!-- 此时会加载Layout里面的默认头部 -->
      <!-- 可以省略Layout里name="default"对应的#default, s-lay就是自定义的正文部分 -->
     	<s-lay></s-lay>
    	<!-- v-slot:footer 可以写成#footer --> 
      <template v-slot:footer>自己定义的尾部</template>
    </layout>
  </div>
</template>
<script>
import Layout from "./Layout";
import SLay from "./lazyload/SLay";
export default {
  components: {
    Layout,
    SLay
  }
};
</script>

// Layout.vue
<template>
  <div>
    <header>
      <slot name="header">
        <nav>默认头部
          <span>{{ user.name }}</span>
        </nav>
      </slot>
    </header>
    <main>
    <!-- name="default"默认正文，页面中可以省略#default -->
      <slot name="default">默认正文</slot>
    </main>
    <footer>
      <slot name="footer">默认尾部</slot>
    </footer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      user: {
        name: "Li Lei",
        email: "lilei@email.com"
      }
    };
  }
};
</script>

最佳实践

外部修改，内部稳定

// SLay.vue
<template>
// 使用子组件SLoad的数据【#default="{data}"】拿到子组件的变量值
  <s-load url="http://xxx.com/api" #default="{data}">
    <div>锣鼓喧天，旌旗蔽空地欢迎 {{ data.name }}</div>
  </s-load>
</template>
<script>
import SLoad from "./SLoad";
export default {
  components: {
    SLoad
  }
};
</script>

// SLoad.vue
<template>
  <div>
    <div v-if="loadding">加载中。。。</div>
    // 提升子变量【:data="data"】，让父组件拿到data
    <slot v-else :data="data"></slot>
  </div>
</template>
<script>
export default {
  props: ["url"],
  data() {
    return {
      loadding: true,
      data: {}
    };
  },
  created() {
    setTimeout(() => {
      this.loadding = false;
      this.data = { name: "LiLei" };
    }, 1000);
  }
};
</script>