Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
357 views
in Technique[技术] by (71.8m points)

javascript - Vue如何使用render函数回退到默认渲染?(Vue how to fallback to default rendering with the render function?)

Looking at this simple hello world html page(看看这个简单的Hello World HTML页面)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <title>Hello World</title> </head> <body> <div id="app"> Message is {{ message }} </div> <script> new Vue({ el: "#app", data: { message: "Hello World!" } }) </script> </body> </html> When served as a static page it will show the Message is Hello World!(当用作静态页面时,它将显示Message is Hello World!) text on the page.(页面上的文字。) If I add a render function to the Vue declaration(如果我将render函数添加到Vue声明中) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <title>Hello World</title> </head> <body> <div id="app"> Message is {{ message }} </div> <script> new Vue({ el: "#app", data: { message: "Hello World!" }, render: function (h) { return h("p", "Rendered " + this.message); } }) </script> </body> </html> It will show Rendered Hello World!(它将显示“已Rendered Hello World!) inside a <p> element, erasing whatever was present inside the <div> element.(在<p>元素内,删除<div>元素内的所有内容。) Now my question is, what if I want the render function to perform the default rendering under certain conditions, ie.(现在我的问题是,如果我想让render函数在某些条件下执行默认渲染,即。) show the Message is Hello World!(显示Message is Hello World!) text?(文本?) Something like(就像是) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <title>Hello World</title> </head> <body> <div id="app"> Message is {{ message }} </div> <script> new Vue({ el: "#app", data: { message: "Hello World!" }, render: function (h) { if (this.message === "Hello World!") { /* do something to make the render function fallback to default rendering? */ } else { return h("p", "Rendered " + this.message); } } }) </script> </body> </html> I'm aware that I can achieve this kind of effects in different ways , I'm just wondering if it's possible to tell Vue to revert back to the default fallback rendering mechanism inside the render function, or not?(我知道我可以通过不同的方式来实现这种效果 ,我只是想知道是否有可能告诉Vue恢复到render函数内部的默认回退渲染机制?) ====== EDIT ======(======编辑======) Just to clarify some more, I'm NOT looking for solutions like this(为了澄清更多,我不是在寻找这样的解决方案) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <title>Hello World</title> </head> <body> <div id="app"> Message is {{ message }} </div> <script> new Vue({ el: "#app", data: { message: "Hello World!" }, render: function (h) { if (this.message === "Hello World!") { return h("p", "Message is " + this.message); } else { return h("p", "Rendered " + this.message); } } }) </script> </body> </html> I'm wondering if somehow you can halt the render function without returning any rendered content and make Vue to show the default rendering like there's no render function declared at all.(我想知道是否可以以某种方式停止渲染功能而不返回任何渲染内容并使Vue显示默认渲染,就像根本没有声明任何渲染功能一样。)   ask by hellopeach translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You could compile the template string yourself.(您可以自己编译模板字符串。)

It can be accessed by instance property $el.innerHTML .(可以通过实例属性$el.innerHTML进行访问。) Then you could call Vue.compile to compile the template string.(然后,您可以调用Vue.compile来编译模板字符串。) More about compile: https://vuejs.org/v2/api/#Vue-compile(有关编译的更多信息: https : //vuejs.org/v2/api/#Vue-compile) Somethink like this:(像这样:) if (this.message === 'Hello World!') { return Vue.compile('<div>' + this.$el.innerHTML + '</div>').render.call(this, h) /* do something to make the render function fallback to default rendering? */ }

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...