vue 渲染函数处理slot_Vue 组件 & Slot基础 & 无渲染组件

Vue 及其所有组件都只不过是 JavaScript.

如果不认同这句话,可以看下接下来的vue组件基础。

一、 Vue组件本质

观察一下下面这个单文件组件,相信很多人都写过类似的代码。

{ { todayIsSunny ? 'Makes me happy' : 'Eh! Doesn't bother me' }}

export default {

data: () => ({ todayIsSunny: true })

}

.mood:after {

content: '';

}

Vue 试图简化样式和其他资源的管理,只是 Vue 并没有直接做这些事情,而是把这些工作留给了构建过程,比如 webpack。

webpack 在处理.vue 文件时,会对其执行一个转换。在转换过程中,CSS 被从组件中提取出来,并放到单独的文件中,剩余部分则被转换为 JavaScript。例如:

export default {

template: `

{ { todayIsSunny ? 'Makes me happy' : 'Eh! Doesn't bother me' }}

`,

data: () => ({ todayIsSunny: true })

}

当模板编辑器遇到这段代码,它将 template 属性提取出来,并将它的内容编译为 JavaScript,然后将一个渲染函数添加到组件对象中。这个渲染函数将返回已转换为 JavaScript 的 template 属性的内容。

对JSX熟悉的人对这个代码就十分眼熟了。

Vue提供了方法可以自己写渲染函数,有关渲染函数的更多信息,请参阅官方文档

render(h) {

return h(

'div',

{ class: 'mood' },

this.todayIsSunny ? 'Makes me happy' : 'Eh! Doesn't bother me'

)

}

现在,当组件对象被传给 Vue 时,组件的渲染函数会经过一些优化并变成 VNode(虚拟节点),然后 VNode 被传给 snabbdom(Vue 内部用于管理虚拟 DOM 的库)。Vue 通过 VNode 的方式来渲染组件。

二、Slot基本功

Vue中使用slot的一个重要原因,就是为了达到组件的复用,子组件的某些元素直接由调用他的父组件决定。

不能免俗,先记一下目前的三种插槽。

单个插槽

其实就是最简单的配置,不额外写任何东西,直接拿官网的例子

子组件

父组件调用

Your Profile

最终会渲染为

Your Profile

具名插槽

其实就是指定了名字的插槽,代码会被渲染到指定的位置。

继续上面的例子:

子组件指定具名插槽和默认插槽,则父节点中slot的元素会按位置渲染:

我是分割线

export default {

props: {

url: {

type: String

}

},

data() {

return { specData: '我的内容来自子节点'};

}

};

父组件:

Your Profile

{ {specData}}

我是up

import navigationLink from './child.vue';

export default {

created(){

},

data() {

return { specData: '我必须由父节点来传递,我的内容来自父节点};

},

components: { navigationLink },

}

最终渲染为:

我是up

我是分割线

Your Profile

我必须由父节点来传递,我的内容来自父节点

可见,多了一个name,其实我们就可以定制显示的位置,和默认的匿名插槽混用也不会有影响,这个在需要渲染多个插槽时十分有效。

在提到作用域插槽之前,必须确保已经了解Vue的编译作用域。

父组件模板的所有东西都会在父级作用域内编译;子组件模板的所有东西都会在子级作用域内编译。

其实仔细看上面的例子,父子组件都赋值了specData,但是渲染的是父组件的内容便了解了,其实写错了也没事,Vue会给你及时提示的。

作用域插槽

子组件通过给slot上绑定参数,达到给父组件传递进来的模板赋值的效果。

子组件:

我是分割线

我是分割线

export default {

props: {

url: {

type: String

}

},

data() {

return {

specData: "我的内容来自子节点",

nameList: ['小王', '小张', '隔壁大爷']

};

}

};

父组件:(这里slot-scope="{ list }"直接用了结构)

Your Profile

{ {specData}}

我是up

{ {item}}

import "@mfelibs/base-css";

import navigationLink from "./child.vue";

export default {

created() {},

data() {

return {

specData: "我必须由父节点来传递"

};

},

components: { navigationLink }

};

最终渲染为

三、无渲染组件

我们可以这样理解无渲染组件:为一个组件创建通用功能抽象,然后通过扩展这个组件来创建更好更健壮的组件,或者说,遵循 S.O.L.I.D 原则。

根据 S.O.L.I.D 的单一责任原则:

一个类应该只有一个用途。

我们将这个概念移植到 Vue 开发中,让每个组件只提供一个用途。

例如我们实现一个评论组件,当另一个需求过来,修改了样式,修改了交互时,就不得不去修改组件代码来实现这个需求。而我们之前做的和接口的通信方式,和客户端的通信方式,可能又需要重新copy一份。

这打破了 S.O.L.I.D 的开放封闭原则,这个原则规定:

类或组件应该为扩展而开放,为修改而封闭。

也就是说,你应该扩展它,而不是直接修改组件的源代码。

Vue 遵循了 S.O.L.I.D. 原则,让组件拥有 prop、event、slot 和 scoped slot,这些东西让组件的交互和扩展变得轻而易举。我们可以构建具备所有特性的组件,而无需修改任何样式或标记。这对于可重用性和高效代码来说非常重要。

在设计时需要仔细思考的是

表现和行为分离

由于无渲染组件只处理状态和行为,所以它们不会对设计或布局强加任何的决策。这意味着,如果你能够找到一种方法,将所有的行为从UI组件中移出,将将其转换成一个无组件的组件,那么你就可以重用无渲染组件来实现任何布局效果的标签输入控件。

简单的一个toogle组件

这个组件完成一个简单的功能,传递给子组件一个状态on (也可以不传,例子中就没传),通过调用子组件暴露出的方法,达到利用子组件的状态,影响父组件的渲染的目的。这样,父组件的结构可以随便改,样式随便让产品设计去折腾,我们的基本功能是不变的,达到一定层度的代码复用。

父组件

注意slot-scope不能直接用在子组件标签上

Blue pill

Red pill

It's all a dream, go back to sleep.

I don't know how far the rabbit hole goes, I'm not a rabbit, neither do I measure holes.

import toogle from "./toogle";

export default {

data() {

return {

buttonPressed: false

};

},

components: {

toogle

},

methods: {

click(fn) {

this.buttonPressed = true;

fn && fn();

}

}

};

子组件

export default {

props: {

on: { type: Boolean, default: false }

},

data() {

return { currentState: this.on };

},

methods: {

setOn() {

this.currentState = true;

},

setOff() {

this.currentState = false;

},

toggle() {

this.currentState = !this.currentState;

}

}

};

如果要用render函数,子组件可以省去template部分,在script部分添加

render: function(createElement) {

return createElement("div", [

this.$scopedSlots.default({

on: this.currentState,

setOn: this.setOn,

setOff: this.setOff,

toggle: this.toggle

})

]);

},

关于这部分可参考 官网api

2018.11.12更新

发现了一篇好文,讲解的不错

Vue中的无渲染组件 (原文 70%付费)

直接搜题目 就能搜到有人买过了 粘出来的文章,这里不再贴了。

参考资料

你可能感兴趣的:(vue,渲染函数处理slot)