Vuejs屬性或方法未在實例上定義，但在渲染期間被引用

Question

我是VueJS的新手，正在嘗試創建自定義表單組件。

我正在使用http://element.eleme.io元素。 所以我創建了一個新的Form.vue文件

<template>
    <el-form :model="data">
        <slot></slot>
    </el-form>
</template>

<script>
  import { FormItem, Input } from 'element-ui';
  export default {
    name: 'general-form',
    components: {
        FormItem,
        Input
    },
    props: ['data'],
    mounted: function() {
        console.log(this.data);
    }
  }

</script>

這是我的app.js

// Element.io
import { Form, FormItem, Input } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

// Custom
import GeneralForm from '../../components/presentational-subsystem/form/Form.vue';

Vue.use(Form);
Vue.use(FormItem);
Vue.use(Input);

Vue.config.devtools = true;

var contactsPage = new Vue({
  el: '#contacts-page',
  components:  {
    GeneralForm
  }
});

這是我的看法：

<div id="contacts-page">

<general-form id="contacts-form" :data="{subject: 'abc'}" action="/contacts" method="post">
  <el-form-item label="Subject" prop="subject">
    <el-input v-model="data.subject"></el-input>
  </el-form-item>       
</general-form>

</div>

但是我在控制台中收到此錯誤：

[警告]：屬性或方法“ formData”未在實例上定義，但在渲染期間被引用。 通過初始化屬性，確保在data選項中或對於基於類的組件，此屬性都是反應性的。

我知道如果我將Vue對象更改為此：

var contactsPage = new Vue({
  el: '#contacts-page',
  data: { formData: {} }
  components:  {
    GeneralForm
  }
});

錯誤消失了，但是表格不再起作用了。 我嘗試遵循以下示例：

http://element.eleme.io/#/zh-CN/component/form

和我的標記實際上是相同的，但是當我使用Vue開發工具時，我可以看到Form.vue組件內的formData變量與Vue實例中的共享formData變量不同。

我的問題是如何使<el>元素使用我創建的Form組件中的formData？

Answer 1

當您使用slot ，其范圍（數據的來源）是父級。 插槽的內容引用formData ，它是在子級中定義的。 您可以使用范圍限定的插槽將子數據傳遞到插槽

或者，您可以在父formData中完全定義formData並將其作為prop傳遞給子級，然后將其作為道具傳遞給el-form 。

這個結構：

<el-form :model="formData">
    <slot></slot>
</el-form>

您是否將formData從Form組件傳遞到el-form組件 。 它不會傳遞到插槽。 插槽不是子代，它們是從父代注入的代碼。

父代碼：

<general-form id="contacts-form" action="/contacts" method="post">
  <el-form-item label="Subject" prop="subject">
    <el-input v-model="formData.subject"></el-input>
  </el-form-item>       
</general-form>

正在創建您的Form組件的實例，並將el-form-item作為插槽內容注入。 您得到的錯誤是在該插槽內容中引用formData ，因為插槽的上下文是父級。 插槽對注入的內容一無所知（除非您使用作用域插槽）。

在更新的代碼中：

<general-form id="contacts-form" :data="{subject: 'abc'}" action="/contacts" method="post">
  <el-form-item label="Subject" prop="subject">
    <el-input v-model="data.subject"></el-input>
  </el-form-item>       
</general-form>

您正在此處將data道具傳遞給Form子級，但嘗試在廣告位內容中使用它。 el-input在父級中尋找data 。 嘗試這個：

var contactsPage = new Vue({
  el: '#contacts-page',
  data: {
    data: { subject: 'abc' }
  },
  components:  {
    GeneralForm
  }
});

和

<general-form id="contacts-form" :data="data" action="/contacts" method="post">
  <el-form-item label="Subject" prop="subject">
    <el-input v-model="data.subject"></el-input>
  </el-form-item>       
</general-form>