看看这个简单的 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>
当用作静态页面时，它将显示 Message is Hello World!页面上的文本。如果我添加 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>
它将显示Rendered Hello World!在 <p> 里面元素，删除 <div> 中存在的任何内容元素。现在我的问题是，如果我想让渲染函数在特定条件下执行默认渲染怎么办，即。显示 Message is Hello World!文本？有点像
<!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>
我知道我可以用不同的方式实现这种效果，我只是想知道是否可以告诉 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) {
if (this.message === "Hello World!") {
return h("p", "Message is " + this.message);
} else {
return h("p", "Rendered " + this.message);
}
}
})
</script>
</body>
</html>
我想知道是否可以以某种方式停止渲染函数而不返回任何渲染内容，并使 Vue 显示默认渲染，就像根本没有声明渲染函数一样。
最佳答案
您可以自己编译模板字符串。它可以通过实例属性 $el.innerHTML 访问。然后你可以调用 Vue.compile 来编译模板字符串。
关于编译的更多信息:https://v2.vuejs.org/v2/api/#Vue-compile
有些想法是这样的:
if (this.message === 'Hello World!') {
return Vue.compile(this.$el.outerHTML).render.call(this, h)
/* do something to make the render function fallback to default rendering? */
}
关于javascript - Vue 如何使用渲染函数回退到默认渲染？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59089156/