代码之家 › 专栏 › 技术社区 › Rehan

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

vue-component vue.js

Rehan · 技术社区 · 6 年前

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 但我仍然得到这样的错误为所有四个标签

1 回复 | 直到 6 年前

Bert Jeffrey Shen 6 年前

你需要让道具成为你的一部分。

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

注意,props被定义为 container-header 组件。

推荐文章

StuP · 响应式Vue组件在数据更改时不更新

2 年前

dbzx10299 · 对从Api端点返回的数据使用Vue转换组

2 年前

mrDandaleonx · Vue3获取div内容并将其发布到表单

2 年前

ateymour · Vue3在异步调用后将道具传递给子组件

2 年前

Artur Müller Romanov · 是否可以有条件地渲染布局?

2 年前

Ilijanovic · 对象可能未定义

2 年前

devAR · 单击其他组件时,单选按钮未保持选中状态

2 年前

Coderama · 在v-for指令中使用:key属性时,TS应出现类型错误

2 年前

Suffii · Vue表单输入绑定的条件绑定存在问题

2 年前

akkonrad · 函数的作用是:返回数据属性为空的实例

2 年前