Vue 编写容易出现的问题

电玩女神 2022-07-12 03:15 223阅读 0赞

#### **Vue 实现 Tab切换实现的场景很多，比如，利用`vue-router`、利用第三方插件、利用组件等等.** ####

**我用的是组件，为什么不用路由，有3个原因：**

*  1、因为我认为使用路由，再切换tab的时候，路劲地址是变化的，比如：/\#/home、/\#/app等等，这样做==Native hybrid==的同学就会发愁了，尤其是返回按钮，需要设置历史数据，我个人觉得太麻烦！
 *  2、根据需求出发。
 *  3、技术太low。

**综上所述**，上面已经介绍完我为什么要使用组件了

**index.html文件**

<!DOCTYPE html>
    <html lang="en">
    
        <head>
            <meta charset="UTF-8">
            <title>component</title>
            <style type="text/css">*{ padding:0;margin:0}#app{ width:500px;height:300px;margin:0 auto;background-color:#ddd}.top{ height:50px;line-height:50px;width:100%;background-color:#999}.top ul li{ display:inline-block;margin:0 10px}.top ul li a{ text-decoration:none;color:white}</style>
        </head>
    
        <body>
            <div id="app">
                <div class="top">
                    <ul>
                        <li @click='tabToggle("tab01");'>Tab001</li>
                        <li @click='tabToggle("tab02");'>Tab002</li>
                    </ul>
                </div>
                <div>
                    <component :is='currentView' keep-alive></component>
                </div>
            </div>
        </body>
        <script type="text/javascript" src='vue.min.js'> </script>
        <script> var tab01 = Vue.extend({ template: '<p>This is tab01</p>' }) var tab02 = Vue.extend({ template: '<p>This is tab02</p>' }) var app = new Vue({ el: '#app', data: { currentView: 'tab01' }, components: { tab01: tab01, tab02: tab02 }, methods: { tabToggle: function(tabText) { this.currentView = tabText } } }) </script>
    
    </html>

ok,完事儿了！

### **接下来，说说我遇到的问题，如果上面能满足你的问题，则不需要看下面** ###

当然，我不可能只是简简单单的一个页面，一个小demo，如果要应用到项目中，又是另一回事儿。

##### **问题1：** #####

例如：在 .vue文件中

![这里写图片描述][SouthEast]

反反复复，这是什么造成的，对于新手来说，一个不经意间，就造成了，

原因在于data，vue规定，data是一个函数，我这里写成了对象：

![这里写图片描述][SouthEast 1]

==**应修改为：**==

![这里写图片描述][SouthEast 2]

##### **问题2：** #####

查半天资料没查出个所以然来，那个纠结啊，群里各种找大神啊

![这里写图片描述][SouthEast 3]

太闹心，以为是 自己写的组件的问题，各种改，改半天，没任何效果，后来抱着试试的心态，在页面上加了个变量，发现，压根就不起效果，

this.变量名 = "Hello"

页面没有任何反应，以为是vue版本太高了，不支持，算了，不闲扯了，谁做谁知道！

问题的原因在于：加了一个不存在的方法

![这里写图片描述][SouthEast 4]

得，把它删除掉就可以了，其他就不介绍了，完成了。OK了！

--------------------

[SouthEast]: /images/20220711/2791996b0a644cd687030a5cee973e0a.png
[SouthEast 1]: /images/20220711/7e2c521bf5914b7ca1da8ac4fc1659dc.png
[SouthEast 2]: /images/20220711/dd5464bf769a45b6874e9fa9e2f933e3.png
[SouthEast 3]: /images/20220711/46ad45b492854c20928a8305c4138edb.png
[SouthEast 4]: /images/20220711/60f412241c8044c3af47d03eadce6fc9.png