专栏首页方球vue 中使用 jsx 总结

vue 中使用 jsx 总结

vue 中使用 jsx

调用方式

  • 标签函数组件 // 模式1: 类式函数组件 const Sub = { functional: true, name: "Sub", render(h, context){...} } // 模式2: 函数式函数组件 const Sub = (context) => ( <div> { context.props.title } </div> ) // 标签式调用 <template> <Sub title='函数式组件' /> </template> // 注册为组件 { components: { 'l-sub': Sub } } // 可以直接使用函数作为组件的原因是,vue会将函数式函数组件 转换为 类式函数组件
  • 函数组件 // 可以使用直接调用函数的形式调用组件 function Sub(h, title){ return ( <div> { title } </div> ) } // 调用 { render(h){ return ( <div> { Sub("jsx title") } </div> ) } } // 这里 h[createElement] 函数是必须的, vue 将使用该函数渲染组件

为什么存在两种调用模式

这里我们可以直接打印出组件函数,查看vue对两者的不同处理

  • 标签模式
const Tagsub = (context) => ( <div> { context.props.title } </div> )
console.log(Tagsub)

/**
  * { 
        functional: true,
        name: "Sub",
        render(h, context){...}     
    }
  */
  • 函数模式
function Fnsub(h, title){
    return ( <div> { title } </div> )
}

console.log(Fnsub)

/** 
    ƒ Fnsub(h, title) {
      return h("div", [" ", title, " "]);
    }
  */

通过比较我们知道,vue 对不同编写方式的不同解析,造成了不同的调用方式, 所以虽然都是函数式组件, 但 标签模式 不能直接通过函数的方式调用,因为已经被编译成类 而函数模式 需要传入 createElement 函数, 且不能作为标签直接调用,应为无法获取到 createElement函数 除此外,两者获取的参数也是有所不同.

传值/取值

  • 标签类函数组件 通过 context 参数获取组件上的参数 详情
  • 函数类函数组件 可以参考 react 传参, 函数接收的参数既是组件获取的参数

插槽

jsx 中没有 <slot /> 标签, 我们可以通过高阶函数 或 $scopedSlots 属性 提供组件嵌套功能

  • 高阶函数 const Title = context => <h1> title </h1> const Content = context => <p> content </p> const Wrap =(Title, Content) => { return { render(h){ return ( <div> <Title /> <Content /> </div> ) } } } // 使用1: 注册为组件 { components: { article: Wrap(Title, Content) } } // 使用2:jsx { render(h){ const Article = Wrap(Title, Content) return ( <Article /> ) } } 这里 Wrap 返回一个组件类,而不是直接返回标签模板, 如果直接返回标签模板, Wrap 将被识别为函数组件而不是单纯的包装函数
  • 属性 // 类似 react children 我们可以将组件作为属性传给嵌套组件 const Title = context => <h1> { context.props.title } </h1> const Content = context => <p> content </p> const Article = context => { const Title = context.props.title const Content = context.props.content return ( <div> <Title title='article title' /> <Content /> </div> ) } // 使用1: 注册为组件 { components: { Article } } // 使用2:jsx { render(h){ return ( <Article title={ Title } content={Content} /> ) } }
  • $scopedSlots
// vue 原生提供插槽属性, 我们可以直接使用该属性 实现嵌套

// 设置作用域插槽
const Article = context => {

  // 因为需要获取参数,所以作用域插槽返回函数
  const titleSlot = context.scopedSlots.title
  const contentSlot = context.scopedSlots.content

  return (
    <div>
      { titleSlot({title: 'article title'}) }
      { contentSlot({content: 'article content'}) }
    </div>
  )

}

// 使用1: 标签
<template>

  <Article>
    <h1 slot='title'  slot-scope="slotProps">
      {{ slotProps.title }}
    </h1>
    <p slot='content'  slot-scope="slotProps">
      {{ slotProps.content }}
    </p>
  </Article>

</template>
<script>
export default {
    components: {
        Article
    }
}
</script>

// 使用2:jsx
{
    render(h){

        const scopedSlots = {
            title: data => (<h1> { data.title } </h1>),
            content: data =>  ( <p> { data.content } </p> )
        }

        return (
            <Article scopedSlots={ scopedSlots } />
        )
    }
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 我是如何通过开源项目月入 10 万的?

    如果你是一名前端工程师或者像我一样的全站工程师,那么一定对 fullPage.js 这个开源项目不会感到陌生。这是前端社区中非常著名的 JavaScript 组...

    沉默王二
  • Vue 全家桶学习笔记:Vue-router

    在以前,前后端是不分离的,这个阶段通常是由服务端渲染好页面(SSR),再发送页面给前端去展示;接着到了前后端分离的阶段,前端向静态资源服务器拿资源,再通过 js...

    Chor
  • 基于Vue-SSR优化方案归纳总结

    ? Vue-SSR相信大家都不陌生,与传统 SPA 相比,服务器端渲染 (SSR) 能够具备更好的SEO,方便搜索引擎爬虫抓取工具可以直接查看完全渲染的页面,...

    腾讯技术工程官方号
  • 前后端分离,我怎么就选择了 Spring Boot + Vue 技术栈?

    前两天又有小伙伴私信松哥,问题还是职业规划,Java 技术栈路线这种,实际上对于这一类问题我经常不太敢回答,每个人的情况都不太一样,而小伙伴也很少详细介绍自己的...

    江南一点雨
  • Vue如何在父级下使用v-slot的值

    https://cn.vuejs.org/v2/guide/components-slots.html#%E4%BD%9C%E7%94%A8%E5%9F%9F%...

    javascript.shop
  • JavaScript前端学习有哪些项目可以练习

    构建这个应用时,你将使用相对较新的Hooks API来提升你的React技能。示例项目利用了React组件、许多Hooks、一个外部api,当然还有一些CSS样...

    加米谷大数据
  • Vue项目使用CSS变量实现主题化

    主题化管理经常能在网站上看到,一般的思路都是将主题相关的CSS样式独立出来,在用户选择主题的时候加载相应的CSS样式文件。现在大部分浏览器都能很好的兼容CSS变...

    用户6167509
  • 记Ant Design Vue Modal组件的使用及踩的坑

    最近在使用 Vue 开发一个项目,前端框架用的 Ant Design ,Ant Design for React 已经比较成熟,兼容性和灵活性也比较高。但是 A...

    德顺
  • Vue 全家桶学习笔记:Vuex

    开发中,多个组件很可能会共享同一个状态(包括状态和数据),而组件和组件之间可能是兄弟关系,也可能是复杂的多层嵌套关系,如果单靠组件通信完成状态变更和同步,事情会...

    Chor
  • 【Vuejs】420- 带你了解vue-router之keep-alive

    keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。 用法也很简单:

    pingan8787

扫码关注云+社区

领取腾讯云代金券