标签: vue-render-function

我正在尝试在 Vue 3 中渲染一个模板。该模板包含一个组件，该组件在实例上本地注册。

import template from './template'
import RenderlessPagination from "./RenderlessPagination";
import {h, resolveComponent} from 'vue'

export default {
    name: 'Pagination',
    components: {RenderlessPagination},
    provide() {
        return {
            Page: () => this.value,
            perPage: () => this.perPage,
            records: () => this.records
        }
    },
    render() {
        const RLPagination = resolveComponent('renderless-pagination');

        return h(RLPagination, {
            slots: {
                default: function (props) {
                    return props.override ? h(
                        props.override,
                        {
                            attrs: {props}
                        }
                    ) : template(props)(h)
                }
            }
        })
    },
    props: {
        value: {
            type: Number,
            required: …

我想调用父文件中的子组件方法，并且子组件是由渲染函数创建的。下面是我的代码

孩子.ts

export default {
  setup(props) {
    //...

    const getCropper = () => {
      return cropper
    }

    return () =>
      // render function
      h('div', { style: props.containerStyle }, [
      ])
  }

父.ts

<template>
 <child-node ref="child"></child-node>
</template>

<script>
export default defineComponent({
  setup(){
    const child =ref(null)
    
    // call child method
    child.value?.getCropper()


    return { child }
  }

})
</script>

我刚刚使用 Laravel 框架完成了我的项目。现在我想将 vue.js 添加到我的项目中以呈现视图而不加载它们。我浏览了一些教程，发现我需要将我的刀片文件转换为 Vue 组件才能实现这一点。但据我所知，这是一个很大的过程，因为某些功能在 VueJS 中不起作用。我不知道该怎么做。请有人指导我如何做到这一点。提前致谢。

我在 Nuxt 2.13 上遇到了window.__Nuxt__(function(a,b,c,d,.....)). 我不知道它是否会影响我的 SEO，但它让我很紧张，并显示了我所有的语言文件。

这是情况：lang.json我的应用程序中有一个文件。我阅读了它并将其存储lang在Vuex. 但window.__Nuxt__显示了我不想要的语言！！

到目前为止，我已经找到了三个解决方案来删除它：

1：通过将此代码添加到 nuxt.config.js 链接到堆栈答案

hooks: {
    'vue-renderer:ssr:context'(context) {
      const routePath = JSON.stringify(context.nuxt.routePath);
      context.nuxt = {serverRendered: true, routePath};
    }
  }
}

2：通过评论文章链接中的一些代码node_module/@nuxt/vue-renderer/dist/vue-renderer.js

3：通过使用cheerio包并将脚本从正文链接抓取 到文章

const cherrio = const cheerio = require('cheerio');
export default {
//The rest configuration is omitted
hooks: {
    'render:route': (url, result) => {
      this.$ = cheerio.load(result.html,{decodeEntities: false});
      //Since window.__nuxt__ is always located in the first …

和 都h暴露createVNode于vue。

该文档似乎表明它们是相同的：

h() 函数是创建 VNode 的实用程序。也许更准确地命名为createVNode()。

但切换h到createVNode会抛出：

<script lang="ts">
  import { createVNode, defineComponent, h } from 'vue'

  export default defineComponent({
    setup() {
      // works
      return () => h('strong', 'Foo')

      // throws
      return () => createVNode('strong', 'Foo')
    },
  })
</script>

是否可以创建一个使用渲染函数的可组合函数，以便它可以显示某些内容？

例子：

import { h } from 'vue'

export function useErrorHandling() {
  return {
    render() {
        return h('div', { class: 'bar', innerHTML: 'world!' })      
    }
  }
}

<script setup>
import { useErrorHandling } from './mouse.js'

 useErrorHandling()
</script>

<template>
 hello
</template>

与上面的例子的plaground

我有一个简单的隐藏表格

<template>
  <form ref="form" method="POST" action="https://target.com/post" accept-charset="utf-8">
    <input type="hidden" name="data" :value="myData"/>
    <input type="hidden" name="signature" v-model="mySignature" />
    <input ref="submit" type="submit">
  </form>
</template>

并且我希望附加到不同按钮 ( v-on:click="submitForm") 的方法提交此表单设置数据。

export default {
  name: 'MyComponent',
  methods: {
    submitForm() {
      // should update values for inputs
      this.myData = 'dynamically calculated';
      this.mySignature = 'creates signature from data';
      // submit the form with values above
      this.$refs.form.submit();
    },
  },
  data() {
    return {
      myData: null,
      mySignature: null,
    }
  }
}

但似乎我误解了反应性/绑定/参考？在 Vue 中，所以我试过了

• this.$refs.submit.click();
• this.$forceUpdate();
• 设置 …