• 售前

  • 售后

热门帖子
入门百科

Vue h函数的使用详解

[复制链接]
凡尘莲花1 显示全部楼层 发表于 2022-1-8 03:16:09 |阅读模式 打印 上一主题 下一主题
目次


  • 一、熟悉
  • 二、利用

    • 1、h() 参数
    • 2、简单的利用
    • 3、实现一个计数器案例
    • 4、函数组件和插槽的利用

  • 三、jsx的利用

    • 1、jsx的熟悉
    • 2、下载Babel插件支持vue(现在貌似脚手架直接支持)
    • 3、配置babel
    • 4、简单的利用
    • 5、计数器案例
    • 6、组件和插槽的利用


一、熟悉

文档:https://v3.cn.vuejs.org/guide/render-function.html#dom-%E6%A0%91
​ h() 到底会返回什么呢?其实不是一个现实的 DOM 元素。它更准确的名字大概是 createNodeDescription,因为它所包罗的信息会告诉 Vue 页面上需要渲染什么样的节点,包罗及其子节点的描述信息。我们把这样的节点描述为“假造节点 (virtual node)”,也常简写它为 VNode 。“假造 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称谓。

二、利用

文档:https://v3.cn.vuejs.org/guide/render-function.html#h-%E5%8F%82%E6%95%B0

1、h() 参数

h() 函数是一个用于创建 VNode 的实用步伐。大概可以更准确地将其命名为 createVNode(),但由于频仍利用和简便,它被称为 h() 。它担当三个参数:
  1. // @returns {VNode}
  2. h(
  3.     // {String | Object | Function} tag
  4.     // 一个 HTML 标签名、一个组件、一个异步组件、或
  5.     // 一个函数式组件。
  6.     //
  7.     // 必需的。
  8.     'div',
  9.     // {Object} props
  10.     // 与 attribute、prop 和事件相对应的对象。
  11.     // 这会在模板中用到。
  12.     //
  13.     // 可选的(在开发时。建议传,实在没有传的时候,传入 null)
  14.     {},
  15.     // {String | Array | Object} children
  16.     // 子 VNodes, 使用 `h()` 构建,
  17.     // 或使用字符串获取 "文本 VNode" 或者
  18.     // 有插槽的对象。
  19.     //
  20.     // 可选的。
  21.     [
  22.         'Some text comes first.',
  23.         h('h1', 'A headline'),
  24.         h(MyComponent, {
  25.             someProp: 'foobar'
  26.         })
  27.     ]
  28. )
复制代码
2、简单的利用



3、实现一个计数器案例
  1. <script>
  2. /* 设置样式需要在这引入,如果使用style标签,则不能写scoped,不利于设置局部样式,所以不建议 */
  3. import "./style.css"
  4. import { h, ref } from "vue";
  5. export default {
  6.     // data 的写法
  7.     // data() {
  8.     //     return {
  9.     //         counter: 0
  10.     //     }
  11.     // },
  12.     setup() {
  13.         const counter = ref(0)
  14.         return { counter }
  15.     },
  16.     /**
  17.      * 使用setup的时候,下面也可以用this,引入render有绑定this,所以下面取值,要用this
  18.      */
  19.     render() {
  20.         return h("div", null, [
  21.             h("h1", null, `当前计数:${this.counter}`),
  22.             h("button", { onClick: () => this.counter++, class: "button" }, "加 1"),
  23.             h("button", { onClick: () => this.counter--, class: "button" }, "减 1")
  24.         ])
  25.     }
  26. }
  27. </script>
复制代码
修改成纯setup的写法:
  1. <script>
  2. /* 设置样式需要在这引入,如果使用style标签,则不能写scoped,不利于设置局部样式,所以不建议 */
  3. import "./style.css"
  4. import { h, ref } from "vue";
  5. export default {
  6.     // data 的写法
  7.     // data() {
  8.     //     return {
  9.     //         counter: 0
  10.     //     }
  11.     // },
  12.     setup() {
  13.         const counter = ref(0)
  14.         return () => {
  15.             return h("div", null, [
  16.                 h("h1", null, `当前计数:${counter.value}`),
  17.                 h("button", { onClick: () => counter.value++, class: "button" }, "加 1"),
  18.                 h("button", { onClick: () => counter.value--, class: "button" }, "减 1")
  19.             ])
  20.         }
  21.     }
  22. }
  23. </script>
复制代码
4、函数组件和插槽的利用

1)父组件
  1. <script>
  2. import { h, ref } from "vue";
  3. import Test from "./components/Test.vue"
  4. export default {
  5.     setup() {
  6.         return {}
  7.     },
  8.     render() {
  9.         return h(Test, null, {
  10.             // default 对应的是一个函数,default是默认插槽
  11.             default: props => h("span", null, "父传入到组件中的内容:" + props.name)
  12.         })
  13.     }
  14. }
  15. </script>
复制代码
2)子组件
  1. <script>
  2. import { h } from "vue";
  3. export default {
  4.     /**
  5.      * 接收夫传入的内容
  6.      */
  7.     render() {
  8.         return h("div", null, [
  9.             h("div", null, "我是子组件"),
  10.             /**
  11.              * 在这判断别人是否传入
  12.              * 也可以写 null,啥也不展示
  13.              * 也可以在传入一个参数,使用的是 函数传参
  14.              */
  15.             this.$slots.default ? this.$slots.default({ name: "哈哈哈" }) : h("div", null, "我是子组件的默认值")
  16.         ])
  17.     }
  18. }
  19. </script>
复制代码
注:在项目中,如果你像上面一样写代码,就太苦逼了,以是这个时间就要用 JSX。

三、jsx的利用


1、jsx的熟悉

jsx我们通常会通过Babel来进行转换(React编写的jsx就是通过babel转换的);
对于Vue来说,我们只需要在Babel中配置对应的插件即可;
文档:https://v3.cn.vuejs.org/guide/render-function.html#jsx

2、下载Babel插件支持vue(现在貌似脚手架直接支持)
  1. npm install @vue/babel-plugin-jsx -D
复制代码
3、配置babel

1)在根目次下创建 .babel.config.js
2)在.babel.config.js 内里参加,如下代码
  1. module.exports = {
  2.     presets: [
  3.         "@/vue/cli-plugin-babel/preset"
  4.     ],
  5.     plugins: [
  6.         "@vue/babel-plugin-jsx"
  7.     ]
  8. }
复制代码
4、简单的利用
  1. <script>
  2. import { ref } from 'vue'
  3. export default {
  4.     setup() {
  5.         let counter = ref(0)
  6.         return { counter }
  7.     },
  8.     render() {
  9.         return (
  10.             <div>
  11.                 <div>JSX的使用</div>
  12.                 <h2>当前数字:{this.counter}</h2>
  13.             </div>
  14.         )
  15.     }
  16. }
  17. </script>
复制代码
5、计数器案例
  1. <script>
  2. import { ref } from '@vue/reactivity'
  3. export default {
  4.     setup() {
  5.         let counter = ref(0)
  6.         function add() {
  7.             counter.value++
  8.         }
  9.         function decrement() {
  10.             counter.value--
  11.         }
  12.         return { counter, add, decrement }
  13.     },
  14.     render() {
  15.         return (
  16.             <div>
  17.                 <div>JSX的使用</div>
  18.                 <h2>当前数字:{this.counter}</h2>
  19.                 <button onClick={this.add}>加 1</button>
  20.                 <button onClick={this.decrement} >减 1</button>
  21.             </div >
  22.         )
  23.     }
  24. }
  25. </script>
复制代码
6、组件和插槽的利用

1)父组件
  1. <script>
  2. import { ref } from '@vue/reactivity'
  3. import Test from "./components/Test.vue"
  4. export default {
  5.     setup() {
  6.         let counter = ref(0)
  7.         function add() {
  8.             counter.value++
  9.         }
  10.         function decrement() {
  11.             counter.value--
  12.         }
  13.         return { counter, add, decrement }
  14.     },
  15.     render() {
  16.         return (
  17.             <div>
  18.                 <div>JSX的使用</div>
  19.                 {/* 如果这块使用setup里面的变量、方法 要加this */}
  20.                 <h2>当前数字:{this.counter}</h2>
  21.                 <button onClick={this.add}>加 1</button>
  22.                 <button onClick={this.decrement} >减 1</button>
  23.                 <hr />
  24.                 <Test>
  25.                     {/* 这个里面写入传入的内容,也就是传入一个插槽 */}
  26.                     {{ default: props => <p>我是父传入子的</p> }}
  27.                 </Test>
  28.             </div >
  29.         )
  30.     }
  31. }
  32. </script>
复制代码
2)子组件
  1. <script>
  2. export default {
  3.     /**
  4.      * 接收夫传入的内容
  5.      */
  6.     render() {
  7.         return (
  8.             <div>
  9.                 <p>我是组件</p>
  10.                 {/* 这块也有可能没穿,你要显示一个默认值,这个时候,你就要用三元运算符 */}
  11.                 {this.$slots.default()}
  12.             </div>
  13.         )
  14.     }
  15. }
  16. </script>
复制代码
注:如果你要h函数来写组件,请仔细查看文档,以上解说,只是入门级。
到此这篇关于Vue h函数的利用详解的文章就先容到这了,更多相关Vue h函数内容请搜索草根技能分享从前的文章或继承欣赏下面的相关文章希望各人以后多多支持草根技能分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作