VueJS <script> 模板 - Prop 未在小胡子括号中定义

Question

VueJS 新手，欢迎提出任何建议。

我正在尝试使用 Vue 创建 Bootstrap 4 个导航。以下工作正常：

var Tabs = new Vue({
    el: '#tabs',
    components: {
        'tab-view': TabView,
    },
    data: {     
        tabs: settings.tabs
    },
});

<div id='tabs'>
    <ul class='nav nav-tabs'>
        <li class='nav-item' v-for="(tab, index) in tabs" :tab='tab'>
            <a :id='tab' :index='index' :class='{ active: (tab == "app"), "nav-link": true}'>{{tab}}</a>
        </li>
    </ul>
</div>

但是，当我尝试使用脚本标签将其分离到模板中时，它不起作用——我收到 ReferenceError: tab is not defined:

var TabView = {
    template: '#tab-template',
    props: ['tab', 'index'],
};

<div id='tabs'>
    <ul class='nav nav-tabs'>
        <template v-for="(tab, index) in tabs">
            <tab-view :tab='tab' :index='index'></tab-view>
        </template>
        <script type='text/x-template' id='tab-template'>
            <li class='nav-item'>
                <a :id='tab' :index='index' :class='{ active: (tab == "app"), "nav-link": true}'>{{tab}}</a>
            </li>
        </script>
    </ul>
</div>

但是，如果我删除 {{tab}}，它会起作用。我做错了什么？

Answer 1

您实际上应该在 vue app div tag 之外设置 tab-template，因为它是 TabView 组件定义的一部分，就像这样。

<script type='text/x-template' id='tab-template'>
    <li class='nav-item'>
       <a :id='tab' :index='index' :class='{ active: (tab == "app"), "nav-link": true}' >{{tab}}</a>
    </li>
</script>

<div id='tabs'>
    <ul class='nav nav-tabs'>
        <div  v-for="(tab, index) in tabs" :key="index">
            <tab-view :tab='tab' :index='index' ></tab-view>
        </div>
    </ul>
</div>

这有点像您在主 vue var vm 的脚本中单独定义组件 var TabView，然后在 vue vm 中将其用作 'tab-view'

var TabView = {
    template: '#tab-template',
    props: ['tab', 'index']

};


var vm= new Vue({
   el: '#tabs',
   components: {
      'tab-view': TabView,
   },
   data() {
      return{
         tabs:["Home","app","about"]
      }
   },
});

VueJS <script> 模板 - Prop 未在小胡子括号中定义

VueJS <script> Template - Prop is not defined in mustache brackets

vue.js

vue-component

vuejs2

v-for