vue插槽

最新推荐文章于 2024-09-30 11:04:46 发布

李码王

最新推荐文章于 2024-09-30 11:04:46 发布

阅读量70

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_50220069/article/details/109728189

版权

本文介绍了Vue中的插槽功能，如何让子组件在不同父组件中有不同的展现，以及具名插槽和动态组件的使用技巧。通过实例展示了如何利用插槽进行内容定制，并探讨了如何通过`<component :is>`属性灵活切换组件类型。

摘要由CSDN通过智能技术生成

插槽

功能：
子组件在不同父组件中使用时，内部结构可以实现不一样

  // 子组件中 定义一个插槽（占位符） <slot/>
  const Child = {
    template:`
        <div>
          <h3>我是子组件头</h3>  
          <slot/> 
          <h3>我是子组件尾</h3>  
        </div>
      `
  }
  // 在父组件template中
  const Home = {
      template:`
        <div>
          <h2>我是home页</h2> 
          <child>  子组件 自定义标签的内容 会自动灌入的 slot 内容是啥，slot就是啥
            <div>   最好有一个根标签
                xxx
                xxx
                xxx
            </div>
          </child> 
        </div>
      `
  }

具名插槽

可以在子组件内部定义多个插槽(每个插槽起个名字),可以实现组件在不同组件中，多个内容都可以不一样


子组件中
    Child = {
      template:`
        <div>
          <h3>我是子组件头</h3>  
          <slot name="a"/>  // 给slot定义name属性，标记名字
          <h3>我是子组件尾</h3>  
          <slot name="b"/>
        </div>
    `
}

父组件中
          <child>
            <button slot="b">按钮</button> // 通过slot属性 定义 属于哪个slot结构
            <hr/>
            <ul slot="a">
              <li v-for="el in arr" :key="el">
                {{ el }}  
              </li>  
            </ul>
          </child>

动态组件 component is属性

两个子组件名字是
  Child1
  Child2

父组件中 注册 Child1和Child2
  <component is="Child2">
  <component :is="a==1?'Child1':'Child2'">

组件template的其他定义方式（将组件的内容写在外部）

方式1 使用script标签做根组件

<script type="text/html" id="tpl">
    <div>
      <h1>我是home页</h1>  
    </div>
  </script>
  <script src="./vue.js"></script>
  <t>
   
    const Home = {
      template:"#tpl"
    }
    
    Vue.component('Home',Home)

方式2 使用template标签做根组件

<template id="tpl">
    <div>
      <h1>我是home页</h1>  
    </div>
  </template>
  <script src="./vue.js"></script>
  <script>
   
    const Home = {
      template:"#tpl"
    }
    
    Vue.component('Home',Home)