vue插槽

1.插槽使用
正常渲染子组件时,如果子组件的起始标签和闭合标签内有内容,内容是无法被渲染出来的,如下图:

// Son.vue

// Parent.vue
   
            123123123
    

vue插槽_第1张图片
如果我想要使用Parent.vue中子组件标签里面的内容显示,则需要在Son.vue文件中加入插槽,如下图:


vue插槽_第2张图片

2.具名插槽
vue插槽_第3张图片

// Son.vue

// Parent.vue
   
     
   

3.获取插槽内的数据
3.1 需求:现在Son.vue组件中有个user变量要在Parent.vue组件中使用,如下
3.2 Son.vue实现方法,插槽上定义变量名称userInfo,把user变量赋值给userInfo 如下 ,

// Son.vue



3.3 Parent.vue组件获取值

        
            
        

3.4 效果
vue插槽_第4张图片

你可能感兴趣的:(笔记,vue.js,前端,javascript)