0%

Vue实例中的template——Vue-cli模版项目解读

发表于 更新于 分类于
Vue实例中的template

背景

采用Vue-cli搭建Vue官方webpack模版项目后，在查看webpack入口文件：“main.js”时，发现代码是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

对其中的“template: ‘‘,”一行颇感不解，因为以前几乎没有这么写过，template即使使用，也是在component中。经过尝试，发现还不能少了这行代码。

探究

花了半天时间查了文档，检索类似的问题，都没有找到答案。隔壁的“webpack-simple”那个项目模版中，也并没有这么写，而是另外一种写法：

1
2
3
4
5
6
7
import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

需要注意的是以上两个模版对应的html文件中，无一例外的都没有直接使用组件的痕迹。

能够理解以上两段代码的含义：引入必要的component，在html对应的挂载点上应用它。

误区

因为一直在写component，一直在其中使用template、rander，所以无意识中把template和rander归到到了component专属的范畴。

仔细查阅文档会发现其实这是错误的，component其实就是Vue实例的扩展，template和rander都是Vue实例本身就拥有的，在Vue实例中出现它们在正常不过了。

以上的写法，相当于在html的挂载点中应用了组件，不同之处是在html中，你需要采用组件名称的标签，而这里不是。

那么为什么这种写法让人觉得少见呢？

这是因为在实际项目中，我们new一个Vue实例的机会本来就不多，在加上多数情况下很可能在html的挂载点中，已经主动应用了组件，如此就不必写了。

注意事项

1
template: '<App/>',

其中的组件名称要和import、components中的一致，而非组件名称。