vue之slot插槽和render渲染

前置条件？

在我们使用组件之后，当组件定义完毕后，我们可以通过标签的方式去使用这个组件，类似于传统的HTML标签的使用，可以使用单标签，也可以使用双标签的方式；在传统的HTML双标签里面，我们可以在标签的内部写一个内容，那么如果是

在我们自己开发的组件里面也书写内容，那么会出现什么样的结果？

<my-slot>组件的内部写书写了内容</my-slot>

<script>
    // <slot></slot> 这个就是 组件内部的插槽（插座，容器）
    var SlotComponent = {
        template: `
            <div>
            <slot></slot>
            <h2>slot插槽的基本使用 </h2>
</div>
        `
    }
    var vm = new Vue({
        el: '#box',
        data: {
            title: 'hi vuejs!',
        },
        components:{
            'my-slot': SlotComponent
        }
    });
</script>

结果

默认情况下，如果用户在组件的内容书写了内容，则vuejs默认的行为是使用组件的template里面的内容替换组件的调用处，标签内部的内容则会被覆盖

如何实现组件里面也书写内容？

需求：

有的时候我们可以出现这样的情况，组件内部的一些东西，可以是希望用户自己进行定制化，不要写死了，是可以让用户自己来定制要显示的内容

解决方案：

在vuejs里面，作者设计了一种方式，可以在组件的内部（template），使用一定的方式来表示用户在组件调用处内部输入的内容，则这个方式就是 slot（插槽，也可以成为插座（容器），对应的插头(内容)）。

实操

1，类似bootstrap里面的面板，有三个部分 1. 头部 2. 内容 3. 底部
2-注意：在使用这些组件的时候，对于组件内部的内容，如果要显示出来，我们可以在template里面使用 slot 进行显示，

发现了一个小问题，用户在组件里面写的内容，没有严格的顺序概念，导致显示的时候是按照用户在组件内部写的顺序进行显示，但是我们自己开发的组件，有的时候是由严格的顺序关系。
（1） 强制用户必须按照开发组件的人写的文档调用（强制规范）
（2）可以让组件对调用者是透明的，但是自己在开发组件，内部去维护（不用太强制）
3， 调用处如果没有使用 slot 则可以在 组件的template的 slot插槽里面定义好默认显示的内容

<script>
    // <slot></slot> 这个就是 组件内部的插槽（插座，容器）
    // 使用 slot 的时候，我们可以给slot指定规格，使用的 name 属性，默认值 default;
    // 如果用户在组件的调用处，没有给插头里面填写内容，则我们可以在 slot 里面定义好默认显示的内容
    var Pannel = {
        template: `
            <div>
	            <h2>用户自定义的面板</h2>
	            <slot name="header">【我是默认的头部信息】</slot>
	            <slot name="content"></slot>
	            <slot name="footer"></slot>
	            <slot name="default"></slot>
			</div>
        `
    };


    var vm = new Vue({
        el: '#box',
        data: {
            title: 'hi vuejs!',

        },
        components:{
            'pannel': Pannel
        }
    });


</script>

 <pannel>


        <!--slot 设置内容显示在哪个插槽里面-->
        <!--现在组件内容显示顺序不是依赖用户定义的数据顺序，而是组件的开发者在template里面使用slot定义的顺序-->
        <p slot="content">面板的内容：Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam commodi cum deleniti deserunt dignissimos doloribus eos, error exercitationem facilis, in iste itaque nesciunt odit perferendis possimus quos tempore voluptates.</p>
        <h2 slot="footer">面板的底部：Lorem ipsum dolor sit amet, consectetur.</h2>

   
        <h1 slot="header">内容</h1>

        <p>其他内容，没有指定在哪个插槽显示，则这个内容，在默认的slot里面显示</p>


    </pannel>

组件render渲染

0，用户在开发自己组件的时候，可以在组件对象里面使用 template 定义组件的页面的结构，最后使用的template里面的内容替换标签调用处。
1，vue 也是一个根组件。我们并没有写 template，这是因为我们的根组件存在一个特殊的属性，el属性：相当于 根组件的 temaplate
2，如果在根组件里面使用了 template 则会把 根组件选中的DOM区域里面内容全部覆盖。一般情况下，我们也不会在 根组件里面写 template。 根组件是一个容器，放置其他组件。

3，render的返回值也可以替换根组件选中的区域

（1）render翻译过来渲染的意思，除了刚才的 template 可以替换 根组件选中的DOM区域，这个 render 函数的返回值，也可以替换 根组件选中的DOM区域。
（2）render 1. 函数存在一个形参，暂且将名称叫做 createElement(函数的作用，是用于创建虚拟DOM)
（3）createElement . 函数的返回值是有个虚拟的DOM，存在两种调用方式

a. 自己去构建虚拟DOM
-------参数1：虚拟DOM标签的名称
-------参数 2. 虚拟DOM标签里面的内容 < h1>h1标题< /h1>

return createElement(‘h1’, ‘我是虚拟DOM’); // render函数的底层会把 虚拟的DOM转换为真实的DOM—>var h1 = document.createElement(‘h1’); h1.innerText = ‘我是虚拟DOM’; document.body.appendChild(h1);

var vm = new Vue({
        el: '#box',
        render: function (createElement) {
           // VNode = virtual + Node 虚拟节点--由多个虚拟节点--虚拟 DOM
           return createElement('h1', '我是虚拟DOM') //第一种方式
        },
        data: {
            title: 'hi vuejs!',
        },
       
    });

b. 使用的一个组件对象去描述虚拟DOM
简写：render: h => h(RenderComponent),

<my-render></my-render>
var RenderComponent = {
        template: `
            <div>
            <h1> createElement 的第二种调用方式： render渲染</h1>

</div>
        `
    }
var vm = new Vue({
        el: '#box',
        render: function (createElement) {
           return createElement(RenderComponent);//第二种方式
        },
        //简写：render:  h => h(RenderComponent),
        data: {
            title: 'hi vuejs!',
        },
       components: {
            'my-render': RenderComponent
        }
    });