Vue自定义组件无法渲染问题及组件定义方法咨询

一、先搞懂为啥报错 #

你碰到的[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available...这个错误，本质原因很好理解：

• 你现在用的Vue是runtime-only构建版本（就是import Vue from 'vue'默认导入的版本），这个版本为了缩小体积，砍掉了模板编译器——它只能运行提前编译好的render函数，没法在程序运行的时候去解析你直接写的template字符串。
• 你在main.js里给全局组件写了template:
  {{ text }}

  ``，这属于需要“实时编译”的内容，当前Vue版本扛不住，所以就报错啦。

二、两种正确定义自定义组件的方式 #

针对你的场景，推荐两种靠谱的解决方案，选一种用就行：

方法1：用单文件组件（强烈推荐，Vue项目标准操作） #

这是实际开发里最常用的方式，完全符合工程化规范，还能避开编译相关的坑：

1. 先在src/components文件夹下新建一个Child.vue文件，把组件内容放进去：

<template>
  <div>{{ text }}</div>
</template>

<script>
export default {
  // 接收父组件传过来的text属性
  props: ['text']
}
</script>

2. 删掉main.js里那段Vue.component('child', {...})的代码，转而在App.vue里导入并注册这个组件：
   修改App.vue的<script>部分（顺便帮你修正了data里的语法错误）：

import styles from './app.css'
import Navbar from '@/components/Navbar'
import Footer from '@/components/Footer'
import Child from '@/components/Child' // 新增：导入Child组件

export default {
  name: 'App',
  components: { Navbar, Footer, Child }, // 新增：注册Child组件
  computed: {
    theme(){
      return (this.$vuetify.theme.dark) ? 'dark' : 'light'
    },
  },
  data: () => ({
    message: "这是传给子组件的测试文本" // 补上你要传给child的message
  })
};

单文件组件的模板会被Vue-cli在构建阶段就预编译成render函数，完美适配runtime-only版本，以后写组件都这么干准没错。

方法2：用render函数定义全局组件 #

如果你非要在main.js里定义全局组件，那就别写template字符串，直接写render函数——这种方式不需要模板编译器，Vue能直接运行：
修改main.js里的组件注册代码：

Vue.component('child', {
  props: ['text'],
  render(h) {
    // h是createElement的别名，用来创建DOM元素
    return h('div', this.text)
  }
});

三、给Web/JS新手的小提醒 #

Vue官网的示例有时候确实会省略工程化环境的上下文，容易让新手懵，给你几个实用小规则：

• 实际项目里优先用单文件组件（.vue文件），这是行业标准写法，能避开绝大多数奇怪的问题。
• 如果要写全局组件，要么导入预编译好的单文件组件，要么直接写render函数，别碰template字符串（除非你特意配置了带编译器的Vue版本，但没必要，会增大打包体积）。
• 你之前的App.vue里data部分有语法错误，已经在上面的代码里帮你修正了，以后写箭头函数的data要记得把内容写全、括号闭合哦～

内容的提问来源于stack exchange，提问作者svenema