|
$slots：用来访问被 slot 分发的内容。每个具名 slot 有其相应的属性（例如：slot="foo" 中的内容将会在 vm.$slots.foo 中被找到）。default 属性包括了所有没有被包含在具名 slot 中的节点。 通过赋值一个Vnode数组给default，相当于我们上面在模板里手动放入的slot。 instance.vm = instance.$mount(); document.body.(instance.vm.$el); 这段则是用来手动地挂载一个未挂载的实例并使用原生DOM API把它插入文档中。 Render & JSX 到这里就不得不多讲讲render 和 jsx了，render作为Vue2新增的一大特性让开发者获得了使用js构建template的能力。 比如下面这样一个动态生成 heading 标签的组件，直播，你可能会这样写： <template> <h1 v-if="level === 1"> <slot></slot> </h1> <h2 v-else-if="level === 2"> <slot></slot> </h2> <h3 v-else-if="level === 3"> <slot></slot> </h3> <h4 v-else-if="level === 4"> <slot></slot> </h4> <h5 v-else-if="level === 5"> <slot></slot> </h5> <h6 v-else-if="level === 6"> <slot></slot> </h6> </template> <> export default { props: { level: { type: Number } } } </> 如此简单的需求却需要这么冗长的代码，下面我们用 render 函数来实现： <> export default { render: function () { return ( 'h' + this.level, // tag name 标签名称 this.$slots.default // 子组件中的阵列 ) }, props: { level: { type: Number, required: true } } } </> 简洁很多。但是在其他的一些场景，render 函数也有其不足之处，不过，有JSX。 让我们看一看另一足对比： // render 函数 ( 'anchored-heading', { props: { level: 1 } }, [ ('span', 'Hello'), ' world!' ] ) // JSX <anchored-heading :level="1"> <span>Hello</span> world! </anchored-heading> JSX，如果你用过react肯定知道这个all in js 的语法，我一度不能接受react的原因就是不想写JSX，直到我的膝盖中了一箭，写了一段时间个人项目的rn，这才发现了JSX的魅力。 使用JSX其实还能做到更多，但限于篇幅我将通过一个例子展示如何让你的组件获得更灵活的拓展能力。 这是一个Tabs组件的 header部分，通过renderLabel 可以自定义label的样式 < type="text/jsx"> export default { props: { renderLabel: {}, tabs: { type: Array } }, methods: { renderTab(tab) { const RenderLabel = this.renderLabel return ( <div onClick={ () => this.$parent.handleNavClick(tab) } class={{ nav: true, active: tab.name === this.$parent.currentName }}> { RenderLabel ? <RenderLabel tab={ tab }/> : <a href="java:;">{ tab.label }</a> } </div> ) } }, render() { const { tabs, renderTab } = this return ( <div> { tabs.map((tab) => renderTab(tab)) } </div> ) } } </> 默认样式如下：
当传递这样一个组件对象的时候： renderLabel: { props: ['tab'], template: `<div>{{tab.label}}-byRenderLabel</div>` } Amazing！ 以上就是我在使用vue 开发组件的过程中的一点小实践，期待得到你的评论与指点。
本文作者：李梦南（点融黑帮），前端程序猿，写写代码，打打农药，没事撸猫。
|
