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

我有一个带有本地组件的

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']
    }
  })

//导航栏菜单的vue实例
var foo=新的Vue({
el:“#自定义标题”，
数据：{
标签1:‘text1’，
标签2:'text2'，
标签3:'text3'，
标签4：“文本4”
},
方法：{
},
组成部分：{
“容器标题”：{
模板：“”+
''+
“{lable1}}”+
“/{label2}}”+
“/{label3}}”+
''+
''+
''+
“{label4}}”+
''+
''+ 
''
},
道具：['label1']
}
})

如何从组件中的父数据使用Label1？我试图使用

道具

，但对于所有四个标签，我仍然会遇到类似的错误

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

---

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

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

---

请注意，道具被定义为

容器标题组件的属性。
您会遇到什么错误？不要忘记，您必须在父模板中传递值：
我在问题中添加了错误消息，是的，我确实像这样传递了元素
哦，看起来您的
道具实际上不是组件的一部分，您需要将它们移动到组件中。您也可以共享HTML吗？
#自定义标题的代码
components : {
  'container-header' : {
     template : '...',
     props : ['label1'] // HERE
  },
  // props: ['label1'] NOT HERE
}