设为首页收藏本站
开启辅助访问 切换到宽版

安徽论坛

 找回密码
 立即注册

QQ登录

只需一步，快速开始

安徽论坛»论坛 › 大国徽商 › 计算机 › Vue h函数的使用详解
返回列表 发新帖
查看: 13549|回复: 0

Vue h函数的使用详解

[复制链接]
万胜

90

主题

513

回帖

1048

积分

金牌会员

Rank: 6Rank: 6

积分
1048
发表于 2022-3-26 10:59:11 | 显示全部楼层 |阅读模式
网站内容均来自网络，本站只提供信息平台，如有侵权请联系删除，谢谢！
目录


一、认识

文档：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',

  10.     // {Object} props
  11.     // 与 attribute、prop 和事件相对应的对象。
  12.     // 这会在模板中用到。
  13.     //
  14.     // 可选的(在开发时。建议传，实在没有传的时候，传入 null)
  15.     {},

  17.     // {String | Array | Object} children
  18.     // 子 VNodes, 使用 `h()` 构建,
  19.     // 或使用字符串获取 "文本 VNode" 或者
  20.     // 有插槽的对象。
  21.     //
  22.     // 可选的。
  23.     [
  24.         'Some text comes first.',
  25.         h('h1', 'A headline'),
  26.         h(MyComponent, {
  27.             someProp: 'foobar'
  28.         })
  29.     ]
  30. )
复制代码
2、简单的使用



3、实现一个计数器案例
  1. <script>
  2. /* 设置样式需要在这引入，如果使用style标签，则不能写scoped，不利于设置局部样式，所以不建议 */
  3. import "./style.css"
  4. import { h, ref } from "vue";

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

  6. export default {
  7.     // data 的写法
  8.     // data() {
  9.     //     return {
  10.     //         counter: 0
  11.     //     }
  12.     // },
  13.     setup() {
  14.         const counter = ref(0)
  15.         return () => {
  16.             return h("div", null, [
  17.                 h("h1", null, `当前计数：${counter.value}`),
  18.                 h("button", { onClick: () => counter.value++, class: "button" }, "加 1"),
  19.                 h("button", { onClick: () => counter.value--, class: "button" }, "减 1")
  20.             ])
  21.         }
  22.     }
  23. }
  24. </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";

  4. export default {
  5.     /**
  6.      * 接收夫传入的内容
  7.      */
  8.     render() {
  9.         return h("div", null, [
  10.             h("div", null, "我是子组件"),
  11.             /**
  12.              * 在这判断别人是否传入
  13.              * 也可以写 null，啥也不展示
  14.              * 也可以在传入一个参数，使用的是 函数传参
  15.              */
  16.             this.$slots.default ? this.$slots.default({ name: "哈哈哈" }) : h("div", null, "我是子组件的默认值")
  17.         ])
  18.     }
  19. }
  20. </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>


  16.         )
  17.     }
  18. }
  19. </script>
复制代码
5、计数器案例
  1. <script>
  2. import { ref } from '@vue/reactivity'

  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.                 <h2>当前数字：{this.counter}</h2>
  20.                 <button onClick={this.add}>加 1</button>
  21.                 <button onClick={this.decrement} >减 1</button>
  22.             </div >
  23.         )
  24.     }
  25. }
  26. </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
免责声明
1. 本论坛所提供的信息均来自网络，本网站只提供平台服务，所有账号发表的言论与本网站无关。
2. 其他单位或个人在使用、转载或引用本文时，必须事先获得该帖子作者和本人的同意。
3. 本帖部分内容转载自其他媒体，但并不代表本人赞同其观点和对其真实性负责。
4. 如有侵权，请立即联系，本网站将及时删除相关内容。
回复 设为聚合帖聚合到帖子

使用道具 举报

返回列表 发新帖
懒得打字嘛，点击右侧快捷回复 【右侧内容，后台自定义】
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表