Vue组件传递变量的问题

Question

App.vue 组件

<template>
  <div id="app" :class="{ 'offcanvas-page': isShowSidebar, 'show-offcanvas': isShowSidebar}">
    <vSidebar :is-show-sidebar.sync="isShowSidebar"></vSidebar>  
    <main>
      <vheader :title="title" :is-show-sidebar.sync="isShowSidebar"></vheader>
      <div id="content">
        <component :is="currentView">
          <vlist :currentView.sync="currentView"></vlist>
          <vpost></vpost>
        </component>
      </div>
    </main>
  </div>
</template>

<script>
import vheader from './components/vHeader'
import vsidebar from './components/vSidebar'
import vlist from './components/vList'
import vpost from './components/vPost'

export default {
  components: {
    vheader: vheader,
    vsidebar: vsidebar,
    vlist: vlist,
    vpost: vpost
  },
  data: function(){
    return {
      title: "hahaha",
      isShowSidebar: false,
      currentView: "vlist"
    }
  },
  watch:{
    isShowSidebar: function(){
      if(this.isShowSidebar){
        document.body.style.position = "fixed"
      }else{
        setTimeout(function(){
          document.body.style.position = "static"
        }, 300)
      }
    }
  }
}
</script>

vList.vue 组件

<template>
    <div class="post-list">
        <ul>
            <li v-for="post in posts" :class="post.tab" :id="post.id" @click="getTopic">
                <h3 class="title"><span class="tab">{{tabToName(post.tab)}}</span>{{post.title}}</h3>
                <div class="info">
                    <div class="left">
                        <img :src="post.author.avatar_url" alt="">
                        <div>
                            <p class="author">{{post.author.loginname}}</p>
                            <p class="post_time">{{post.create_at}}</p>
                        </div>
                    </div>
                    <div class="right">
                        <p><strong title="回复数">{{post.reply_count}}</strong> / <span title="阅读数">{{post.visit_count}}</span></p>
                        <p class="latest_reply_time">{{post.last_reply_at}}</p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    import api from "../api"

    export default{
        data: function(){
            return{
                posts: {}
            }
        },
        props: {
            currentView: {
                required: true,
                type: String
            }
        },
        created: function(){
            var self = this;
            api.topic.getTopicList({
                page: 1,
                limit: 20
            }, function(data){
                self.posts = data.data
            })
        },
        methods:{
            tabToName: function(tab){
                var name = "";
                switch(tab) {
                    case "top": name = "置顶"; break;
                    case "ask": name = "问答"; break;
                    case "share": name = "置顶"; break;
                    case "job": name = "招聘"; break;
                    default: name="未能识别"
                }
                return name;
            },
            getTopic: function(){
            }
        }
    }
</script>

我想点击列表项时，通过修改双向绑定的currentView属性实现切换组件的效果，但vList组件并没有接收到App.vue传递给他的currentView属性。在Chrome的控制台中显示如下提示：

[Vue warn]: Missing required prop: currentView (found in component: <vlist>)
[Vue warn]: Invalid prop: type check failed for prop "currentView". Expected String, got Undefined. (found in component: <vlist>)

Answer 1

Vue 如果是要在元素上使用到 內聯 來設定一些東西時，要用 kebab-case

<vlist :current-view.sync="currentView"></vlist>

這樣試試看