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
}
});

• 点赞
• 收藏
• 分享
• 文章举报