vue实现通过prop向组件中传值遇到的问题？

最新推荐文章于 2022-07-12 17:52:48 发布

闫小样丶

最新推荐文章于 2022-07-12 17:52:48 发布

阅读量1.4k

点赞数 2

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/yanxiaoyang12580/article/details/102700155

版权

Vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

今天在做项目的过程中，遇到了一个问题。就是给组件传值的过程中，报错了。

代码如下：

//封装的组件
Vue.component("nav-menu-component",{
  props: {//这里是组件可以接受的参数，也就是相当于面向原型写组件时的配置参数，用户可以传递不同参数，自己定义组件
    activeTabIndex: { //默认选中tab
      type: String,
      default: ''
    },
  },
  template:`
  <!-- start nav-menu -->
  <div id="navContainer">
    <div class="sitebar-wrap">
      <div class="grid-wide">
        <div class="nav-container clear">
          <!-- element-ui -->
          <el-menu :default-active="activeTabIndex" class="el-menu-demo" mode="horizontal" @select="handleTabClick">
            <el-menu-item index="1">首页</el-menu-item>
            <el-menu-item index="2">经贸活动</el-menu-item>
            <el-menu-item index="3">贸易商机</el-menu-item>
            <el-menu-item index="4">投资项目</el-menu-item>
            <el-menu-item index="5">采购需求</el-menu-item>
            <el-menu-item index="6">国际馆</el-menu-item>
            <el-menu-item index="7">国内馆</el-menu-item>
            <el-menu-item index="8">陕西馆</el-menu-item>
            <el-menu-item index="9">综合服务</el-menu-item>
            <el-menu-item index="10">个人中心</el-menu-item>
          </el-menu>          
        </div>
      </div>
    </div>
  </div>  
  <!-- end nav-menu -->`,
  methods:{//这里定义的组件的方法，利用$emit()进行父子组件通信，子组件通过点击事件告诉父组件触发一个自定义事件，$emit()方法第二个参数也可以用来传递数据
    handleTabClick(tab, event) {
      console.log(tab, event);
    }
  },
});

场景分析：

(1) 我是用了elemen-ui中的NavMenu 导航菜单来实现导航选中高亮的效果。而在props中，定义的activeTabIndex就是用来默认选中tab高亮的字段。

(2) 我在home.html文件中，引用了这个组件，想在对应的home.js中定义一个变量，例如：activeTabIndex： ‘1’,让其组件默认选中第一个。

HTML代码：

<body>
  <!-- start body -->
  <div id="indexContainer">
    <!-- MyHeader -->
    <div class="my-header">
      <header-component></header-component>
    </div>
    <!-- navMenu -->
    <div class="my-navMenu">
      <nav-menu-component v-bind:activeTabIndex="activeTabIndex"></nav-menu-component>
    </div>
    <!-- main -->
    <div class="main">
      <el-container>
        <el-main>首页</el-main>
      </el-container>
    </div>
    <!-- Myfooter -->
    <div class="my-footer">
      <footer-component></footer-component>
    </div>
  </div>  
  <!-- end body -->
  
  <!-- js代码 -->
  <script type="text/javascript" src="../../../assets/page/js/home/index.js"></script>
</body>

JS代码：

var vm = new Vue({
  el: '#indexContainer',
  data() {
    return {
      activeTabIndex: '1',  //tab选中项
    }
  },
  created() {
    
  },
  methods: {
    
  },
  watch: {
    // 监测路由变化,只要变化了就调用获取路由参数方法将数据存储组件即可
    
  },

});

此时页面中【报错】：vue.js:603 [Vue tip]: Prop "activetabindex" is passed to component <Anonymous>, but the declared prop name is "activeTabIndex". Note that HTML attributes are case-insensitive and camelCased props need to use their kebab-case equivalents when using in-DOM templates. You should probably use "active-tab-index" instead of "activeTabIndex".

通过翻译查找和官网说明得知，

Prop 的大小写：HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名。

原来是这样的，所以将v-bind:activeTabIndex="activeTabIndex"，改为v-bind:active-tab-index="activeTabIndex"就可以了。

闫小样丶

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue实现通过prop向组件中传值遇到的问题？

今天在做项目的过程中，遇到了一个问题。就是给组件传值的过程中，报错了。代码如下：//封装的组件Vue.component("nav-menu-component",{ props: {//这里是组件可以接受的参数，也就是相当于面向原型写组件时的配置参数，用户可以传递不同参数，自己定义组件 activeTabIndex: { //默认选中tab type: Str...
复制链接

扫一扫