vue.js - vue中实例如何给组件传值？

问题描述

问 题

有个需求
topbar封装成了组件
然后希望在不同页面使用的时候传一个值进去

Page.html:
<div class="page" id="product_list_page">
            <!-- 标题栏 -->
            <headbar :keywordMode="mode"></headbar>
</div>
new Vue({
el: '#product_list_page',
data: {
    mode:1
}
});

Component.js    
var HeadBar = Vue.extend({
  props: {
      keywordMode: {   // 可选字段，有默认值
        default: 0
      }
    },
  template: '...'
});
Vue.component('headbar', HeadBar);

但是组件部分就获取不了这个html实例传的值..请问要怎么做？

解决方案

Vue组件props传递时有个驼峰格式的转化

<headbar :keyword-mode="mode"></headbar>

参考：http://vuejs.org/guide/compon...

这篇关于vue.js - vue中实例如何给组件传值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！