Question

我有一个由<script type="text/x-template"...处理的简单组件，它有自己的数据对象，只有一个属性来控制是否显示div。

我在控制台中收到以下警告：

[Vue warn]：属性或方法“showDiv”未在实例上定义，但在渲染期间引用。确保在数据选项中声明反应数据属性。（在根实例中找到）

现场演示：https://jsbin.com/zucaqog/edit?html,js,output

JS：

Vue.component('my-comp', {
    template: '#my-comp',
    data: function() {
      return { showDiv: false };
    }
});

new Vue({
    el: '#app',
    data: {}
});

如果我将showDiv: false添加到父级的data对象，我将不再收到警告。但是，我想避免这样做，因为此数据属性仅与组件的本地范围相关。我有一种感觉，如果我将组件的html作为字符串放在template: ...中然后它可能会起作用，但是，我宁愿把它放在script内。

Answer 1

这是因为您将子组件的模板定义作为#app div的子项。父组件看到其模板中有showDiv变量的引用，因此它抛出了错误。

将x-template div之外的#app拉出来：

<div id="app">
  <my-comp></my-comp>
</div>

<script type="text/x-template" id="my-comp">
  <div>
    Value of showDiv is {{showDiv}}. 
    <button @click="showDiv=!showDiv">Toggle showDiv</button>
  </div>
</script>

如果数据具有父项不具有的属性，则VueJS组件会抛出警告

1 个答案: