vue如何使用vue slot封装公共组件

使用vue slot封装公共组件

公用子组件:publicSlot

      
       
       

{{title}}

             可以根据你slot name属性选择插槽的位置        
        这里相当于留个位置,接收父组件传入的内容      
export default {
    props: {
    title: {
      type: String
    }
  },
  }

父组件:

     
      
        
            //这里可以写父组件自定义页面的内容                                                                                                                                                                                                                                                                                                           
       //这里是插入了一个按钮        
        操作按钮      
       
import publicSlot from '../public/components/publicSlot.vue'
export default {
    publicSlot
}

vue slot:

vue 插槽:

Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将 元素作为承载分发内容的出口。

  • 具名插槽
  • 作用域插槽
  • 动态插槽

使用slot插槽封装

1.封装头部组件

export default {
  name: "homeTop",
  //定义props的title属性
  props: {
    title: String,
  },
}

2.在main.js中全局导出组件

import HeadTop from './views/HeadTop.vue'
Vue.component('HeadTop', HeadTop)

3.当你要使用组件的时候 如果只要中间的title ,那么solt插槽就不要使用

4.如果左右两边都需要加东西,那么就使用插槽,因为在之前定义了插槽的名字,所以调用的时候需要指定插槽的name,判断你是加在哪里

    
      
             
         

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

你可能感兴趣的