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

Question

我有一个 Vue 实例，其中包含一个像这样的本地组件

// 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？我尝试使用props，但对于所有四个标签，我仍然遇到这样的错误

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

Answer 1

你需要让 props 成为你组件的一部分。

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

注意，props 被定义为container-header 组件的属性。