将数据从Vue实例传递到本地Vue组件

时间:2018-10-24 12:30:52

标签: vue.js vue-component

我有一个具有本地组件的Ext.define('Foresto.store.RESTstore',{ extend: 'Ext.data.Store', storeID:'reststore', proxy: { type:'rest', url:'http://localhost:8001/api/fieldvalues/' }, autoLoad: true}); 实例

Vue

如何使用组件中父数据中的Label1?我尝试使用// vue instance for the navbar menu var foo = new Vue({ el: '#custom-header', data: { label1 : 'text1', lable2 : 'text2', lable3 : 'text3', lable4 : 'text4' }, methods: { }, components : { 'container-header' : { template : '<div class="col">'+ '<div class="custom-erp-activity-details">'+ '<span id="custom-erp-activity">{{ lable1 }}</span>'+ '<span id="custom-erp-activity-name">/ {{ label2 }}</span>'+ '<span id="custom-erp-activity-name">/ {{ label3 }}</span>'+ '</div>'+ '<div class="custom-erp-activity-controls">'+ '<button class="btn btn-danger" id="custom-erp-toggle-views">'+ '{{ label4 }}'+ '</button>'+ '</div>'+ '</div>' }, props : ['label1'] } }) ,但对于所有四个标签,仍然会收到类似的错误

  

属性或方法“ label1”未在实例上定义,但在渲染期间被引用。通过初始化属性,确保该属性在data选项中或对于基于类的组件都是反应性的

1 个答案:

答案 0 :(得分:1)

您需要使道具成为组件的一部分。

components : {
  'container-header' : {
     template : '...',
     props : ['label1'] // HERE
  },
  // props: ['label1'] NOT HERE
}

请注意,道具被定义为container-header组件的属性。