Question

我创建了一个简单的Vue示例，使用内联模板显示名称“ John”，但出现以下错误：

[Vue warn]: Property or method "name" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

但是，如果我使用缩小版本：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.2/dist/vue.min.js"></script>

该代码使用单词'John'进行打印，并且不会显示任何错误。是某种错误还是我没有正确使用Vue？

Vue.component('profilecontent', {});

var content = new Vue({
  el: '#profile-content-wrapper',
  data: {
    name: "John",
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.2/dist/vue.js"></script>

<!-- Minify version works
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.2/dist/vue.min.js"></script>
-->

<div id="profile-content-wrapper">
  <profilecontent inline-template>
    <div>
      <div>{{name}}</div>
    </div>
  </profilecontent>
</div>

Answer 1

并不是说使用Vue的缩小版本可以修复该错误，不是因为未缩小版本在您执行可能不正确的操作时显示警告，而缩小版本会抑制这些警告。

您使用inline-template的方式意味着Vue希望在profilecontent组件而不是主应用程序上寻找您的name变量。严格来说，您应该将name作为道具传递给该组件；即使在最小化的开发模式下，这也消除了警告：

Vue.component('profilecontent', {props: ['name']});

var content = new Vue({
  el: '#profile-content-wrapper',
  data: {
    name: "John",
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.2/dist/vue.js"></script>

<div id="profile-content-wrapper">
  <profilecontent inline-template :name="name">
    <div>
      <div>{{name}}</div>
    </div>
  </profilecontent>
</div>

（也就是说，坦率地说，我不确定name变量在警告被抑制时为何设法落入该组件；内联模板内的变量范围应该是该组件的范围，不是其父代。）

Answer 2

您应该使用<slot></slot>来组成组件，即：将其他元素放入其中：

Vue.component('profilecontent', {
  template: `<h1><slot></slot></h1>`
});

var content = new Vue({
  el: '#profile-content-wrapper',
  data() {
    return {
      name: "John",
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.2/dist/vue.js"></script>

<!-- Minify version works
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.2/dist/vue.min.js"></script>
-->

<div id="profile-content-wrapper">
  <profilecontent>
    <div>
      <div>{{name}}</div>
    </div>
  </profilecontent>
</div>

如果使用内联模板，则可以将name属性放在该组件的数据对象中，例如：

Vue.component('profilecontent', {
   data() {
    return {
      name: "John",
    }
  }
});

var content = new Vue({
  el: '#profile-content-wrapper',
 
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.2/dist/vue.js"></script>

<!-- Minify version works
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.2/dist/vue.min.js"></script>
-->

<div id="profile-content-wrapper">
  <profilecontent inline-template>
    <div>
      <div>{{name}}</div>
    </div>
  </profilecontent>
</div>

使用非最小化版本时未定义Vue属性或方法

2 个答案: