Vue.js slot 插槽的使用最新笔记

Vue slot 插槽使用

/*
步骤：
1.注册局部组件 或者 全局组件 挂载节点template 使用模板字符串
挂载节点template中模板需要写入子组件插入内容的位置 slot插槽 插入 取名 由于绑定 v_slot：取的名
2.创建一个Vue实例 el挂载节点为HTML类名 或者 标签
components为子组件 属性名可以作为标签使用（组件的属性名都可以作为标签使用）
实例中的template为要插入到父组件的内容
模板内容中template标签添加绑定 如： <template v-slot:more>
*/

HTML部分

<div id="app">

 </div>

Vue.js 部分

//1.注册一个组件   局部组件

let countParent = {  //父组件
    template: `       //使用模板插入
        <div>
            <div>这是父文本</div>
            <div>ccccc</div>
            <slot name="more" />
            <div>这是父dd文本</div>
            <div>这是父fdsd文本</div>
        </div>
    `
}

//2.创建一个实例

new Vue({  //实例
    el: '#app',       //挂载节点
    components:{   // 子组件   + s    “属性名”可以用作HTML中的标签 
        "count-parent": countParent
    },
    template: `
        <div>
            <count-parent>    //子组件的“属性名”作为标签
            		<template v-slot:more>
               				 <a>删除</a>
               				 <div>fdhfdhfd</div>
               				 <h1>这是父fdsd文本</h1>
            		</template>
            </ count-parent>    
        </div>
    `
})