20180408-20180413 vue踩坑

Posted 2020-10-31 要一份黄焖鸡

1. 在vue的template里，注意驼峰写法，如：

   :style="{marginLeft:`-${mleft}px`}"

    

2. 在一个methods里调用另一个methods：

   this.$options.methods.function.bind(this)();//可用
   this.function();//可用
   this.$options.methods.function;//不好用

   目前并不知道什么情况，有空研究下来更

3. 在定时器中想改变data中的值

   let self = this;
   setTimeout(function(){
      self.xx = xxx; 
   })

   注意不能在定时器里用this，指向错误。

4. vue子组件传递数据到父组件。懒得写了直接粘张别人的图。原理就是从子组件emit，在引用子组件的标签上父组件使用方法去接收，父组件再定义一个方法取值。（看起来很绕其实很简单）
5. 
6. vue父组件向子组件传递数据
7. vuex (以下为个人笔记，可以不用继续看了。。)state:状态管理 action调用mutations 只有mutations能改变state getter进行二次计算 $state.dispatch.(\'action中的方法\') action用commit调用mutation方法 改变state的值
8.  调取action自带参数，并且需要用commit 前三行为讲commit结构赋值(不懂的去看es6)
9. axios传参时，如果后端要用formdata格式，则需要再axios增加请求头 

   axios.defaults.headers = {
   "Content-Type": "application/x-www-form-urlencoded"
   }

   并且参数要使用new URLSearchParams() ，并用append添加，直接用 参数.xxx = xx 是不好用的（并不知道为什么，搞了好久）

10. route跳转路由，传参 link方式

    <router-link 
        :to="{
            path: \'yourPath\', 
            params: { 
                name: \'name\', 
                dataObj: data
            },
            query: {
                name: \'name\', 
                dataObj: data
            }
        }">
    </router-link>

    <template>
        <button @click="sendParams">传递</button>
    </template>
    <script>
      export default {
        name: \'\',
        data () {
          return {
            msg: \'test message\'
          }
        },
        methods: {
          sendParams () {
            this.$router.push({
                path: \'yourPath\', 
                name: \'要跳转的路径的 name,在 router 文件夹下的 index.js 文件内找\',
                params: { 
                    name: \'name\', 
                    dataObj: this.msg
                }
                /*query: {
                    name: \'name\', 
                    dataObj: this.msg
                }*/
            })
          }
        },
        computed: {
    
        },
        mounted () {
    
        }
      }
    </script>
    <style scoped></style>

    params为所传参数，query为url携带参数（顺带一提，vue可以用$route.query.xx直接取值，但是只能取#/后边的，别问我怎么知道的，哭），在新的跳转里使用$route.params.xx进行取参。