Vue js 2-无法安装组件：未定义模板或渲染功能

Posted 2023-02-23

【中文标题】Vue js 2-无法安装组件：未定义模板或渲染功能

【英文标题】：Vue js 2- Failed to mount component: template or render function not defined

【发布时间】：2018-03-09 18:36:33

【问题描述】：

我有一个组件：

<player-info :data="player"></player-info>

我想使用vue-mask-input plugin 作为子组件：

<masked-input v-model="date" mask="11 / 11 / 1111" placeholder="Date">

这是整个组件：

<template>
  <div id="info" class="player-info-card-content section-card">
    <div class="row">
      <div class="col-12">
        <h5 class="section-title"><i class="ion-ios-list-outline title-icon"></i> Overview</h5>
        <button @click="edit = !edit" class="button edit-button-wrapper">
          <i v-if="!edit" class="ion-edit edit-button"></i>
          <i v-if="edit" class="ion-close edit-button"></i>
        </button>
        <hr class="info-title-hr">
      </div>
    </div>
    <div class="row info-content">
      <div class="col-12">
        <div class="row">
          <div class="col-6 col-md-3 player-info-data">
            <div class="row">
              <div class="col-12 info-box">
                <span class="info-label">Born</span>
                <p v-if="!edit"> player.birthday </p>
                <!--
                <input v-if="edit" type="text" v-mask="'999.999.999-99'">
                <input class="info-data-input" v-if="edit" name="birthday" v-model="player.birthday" value=" player.birthday ">
                -->
                <div><masked-input v-model="date" mask="11 / 11 / 1111" placeholder="Date"></div>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-3 player-info-data">
            <div class="row">
              <div class="col-12 info-box">
                <span class="info-label">Club</span>
                <p v-if="!edit"> player.club </p>
                <input class="info-data-input" v-if="edit" name="club" v-model="player.club" value=" player.club ">
              </div>
            </div>
          </div>
          <div class="col-6 col-md-3 player-info-data">
            <div class="row">
              <div class="col-12 info-box">
                <span class="info-label">Position</span>
                <p v-if="!edit"> player.position </p>
                <input class="info-data-input" v-if="edit" name="position" v-model="player.position" value=" player.position ">
              </div>
            </div>
          </div>
          <div class="col-6 col-md-3 player-info-data">
              <div class="row">
                <div class="col-12 info-box">
                  <span class="info-label">Height</span>
                  <p v-if="!edit"> player.height  <span v-if="player.height != ''"></span></p>
                  <input class="info-data-input" v-if="edit" name="height" v-model="player.height" value=" player.height ">
                </div>
            </div>
          </div>
          <div class="col-6 col-md-3 player-info-data">
            <div class="row">
              <div class="col-12 info-box">
                <span class="info-label">Weight</span>
                <p v-if="!edit"> player.weight  <span v-if="player.weight != ''">kg</span></p>
                <input class="info-data-input" v-if="edit" name="weight" v-model="player.weight" value=" player.weight ">
              </div>
            </div>
          </div>
          <div class="col-6 col-md-3 player-info-data">
            <div class="row">
              <div class="col-12 info-box">
                <span class="info-label">Foot</span>
                <p v-if="!edit"> player.foot </p>
                <input class="info-data-input" v-if="edit" name="foot" v-model="player.foot" value=" player.foot ">
              </div>
            </div>
          </div>
          <div class="col-6 col-md-3 player-info-data">
            <div class="row">
              <div class="col-12 info-box">
                <span class="info-label">Agent</span>
                <p v-if="!edit"> player.agent </p>
                <input class="info-data-input" v-if="edit" name="agent" v-model="player.agent" value=" player.agent ">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row sub-section">
      <div class="col-12">
        <h5 class="title-margin section-title">
          <i class="ion-ios-stopwatch-outline title-icon"></i>
          Athletic performance
        </h5>
        <hr class="info-title-hr">
      </div>
    </div>
    <div class="row info-content">
      <div class="col-6 col-md-3 player-info-data">
        <div class="row">
          <div class="col-12 info-box">
            <span class="info-label">40m time</span>
            <p class="lg-strong-font">4.3<span>s</span></p>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-3 player-info-data">
        <div class="row">
          <div class="col-12 info-box">
            <span class="info-label">100m time</span>
            <p class="lg-strong-font">11.1<span>s</span></p>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-3 player-info-data">
        <div class="row">
          <div class="col-12 info-box">
            <span class="info-label">Vertical jump</span>
            <p class="lg-strong-font">65<span>cm</span></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import MaskedInput from 'vue-masked-input';
  export default 
      props: ['data'],
      data () 
          return 
            player: this.data.data,
            edit: false,
            date: '',
          
      ,
      computed: 
          link() 
            return `/player/info/edit/$this.player.id`;
          
      ,
      components: 
        MaskedInput
      
  
</script>

在更新到 Vue v.2.4.4 之前，我一直收到警告说它是一个片段实例：

[Vue 警告]：属性“v-model”、“mask”、“placeholder”被忽略 组件，因为组件是一个片段实例：

在将 Vue 更新到 v.2.4.4 后，警告消失了，但我收到了一个新错误：

[Vue warn]: Failed to mount component: template or render function not
 defined.

 found in

 ---> <MaskedInput>
        <PlayerInfo>
          <Player>
            <Root>

这是我页面上的父组件：

<div><player :player=" $player " :videos=" $videos "></player></div>

这个父组件由这个子组件组成：

<template>
  <div class="row">
    <div class="col-md-3">
      <div>
        <player-card :data="player"></player-card>
      </div>
    </div>
    <div class="col-md-9">
      <div>
        <player-info :data="player"></player-info>
      </div>
      <div>
        <player-videos :data="videos"></player-videos>
      </div>
      <div>
        <player-stats :player="player.data.seasons"></player-stats>
      </div>
    </div>
  </div>
</template>

我正在像这样导入 Vue：

import Vue from 'vue/dist/vue';
window.Vue = Vue;

这就是我创建 Vue 实例的方式：

const app = new Vue(
    el: 'body',
    data: window.videoApp
);

我做错了什么，我该如何解决？

【问题讨论】：

会不会是因为你没有关闭<masked-input>组件标签？

我也试过关闭它，但出现了同样的错误。

我无法重现这一点。你用的是什么版本的vue-masked-input？

"_from": "vue-masked-input@latest", "_id": "vue-masked-input@0.5.2", "_inCache": true, "_location": "/vue-masked-input", "_nodeVersion": "6.9.2",

你有没有一个小提琴，所以我们可以试验一个解决方案？

【参考方案1】：

你不能选择body标签作为你需要为你的vue实例创建一个div的主要元素。你需要像这样创建 vue 实例；

const app = new Vue(
  el: '#app',
  data: 
    // Some data...
  ,
  methods: 
    // Your methods...
  
)

你的html文件应该是这样的；

...
<body>
  <div id="app">
    <!-- Vue instance selects and creates components in this div -->
  </div>
</body>

【讨论】：

我仍然将输入掩码作为片段获取

<div><masked-input v-model="date" mask="11 / 11 / 1111" placeholder="Date"></div> 在模板的这一部分中，我猜您没有正确发送道具“掩码”。这一行你需要在 'mask' 之前添加列，以将其作为 vue 属性发送到子组件:mask=...

这就是插件文档中关于如何使用它的描述：niksmr.github.io/vue-masked-input 此外，我没有收到属性错误，我收到片段实例错误。

【参考方案2】：

参考：vue-masked-input，显示以 /> 结束

<div><masked-input v-model="date" mask="11 / 11 / 1111" placeholder="Date" /></div>

但你没有自关闭斜杠或结束标签...

<div><masked-input v-model="date" mask="11 / 11 / 1111" placeholder="Date"></div>

【参考方案3】：

当有一个组件存在，在组件中导入和引用但在模板中没有使用时，也会发生这种情况

...
</template>

<script>
import UnusedComponent from '@/Shared/UnusedComponent .vue'

export default 
  components:  
      UnusedComponent ,
    ,

删除未使用的组件导入和引用将修复它