Are*_*Lin 5 render vue.js vue-cli
我使用Vue cli并实现simple-webpack模板。
在入口文件中main.js，有如下代码：
render: h => h(App)
我知道这h是createElement函数的别名，我想知道为什么像这样的单个文件组件App可以作为参数传递，官方vue文档中没有提到这一点。
有人知道为什么吗？
vue js 中的单文件组件（SFC）有一个.vue扩展名。
在 webpack 中，我们使用一个名为vue-loaderwhich 测试.vue文件的加载器
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
}
这些 SFC 被转换成一个普通的 es6 模块。
该<template>部分被转换为渲染函数vue-template-complier并注入到导出的模块中。
该<style>标签被类似地由用于SASS任何预处理器处理或更少，然后通过 Post-css所述CSS相应地范围和内部动态添加<head>作为<style>标记的帮助下vue-style-loader。
例如，如果App.vue文件如下所示：
<template>
<div>
<p class="myClass">{{msg}}</p>
</div>
</template>
<script>
export default{
data(){
return{
msg: "Vue is awesome!"
}
}
}
</script>
它被转换为一个普通模块，导出为如下所示的对象：
export default {
data(){
return{
msg: "Vue is awesome!"
}
},
render(createElement) {
return createElement("div",
[createElement("p", {class: {'myClass': true}}), this.msg]
)
}
}
这被导入为import App from './path/to/App.vue并在 root vue 实例中使用
new Vue({
el:"#app",
render: h => h(App)
})
您可以查看这个小提琴，其中App作为普通对象传递给render根 vue 实例的函数。
有关更多详细信息，您可以查看此视频，其中 Evan You 对其进行了更详细的解释。
| 归档时间： |
|
| 查看次数： |
1368 次 |
| 最近记录： |