vue踩坑

序言

最近开始写一个Vue的项目，直接从零开始（2333），博主表示亚历山大，为了保证学习Vue的效率，在此记录从0开始学习Vue所踩的坑。

这里就不一一介绍Vue的特性了，直接从编码开始。

组件间的通信

1. 子组件使用父组件的值或方法

   父组件：

    <comp-form 
        :faToSon = "toSon" // 传递给子组件的值
        @closeForm = 'handleClose' // 传递给子组件的方法
    > </comp-form>
      ... 此处省略部分代码 ...
     export default{
       data() {
         return {
          toSon: {} 
         }
       },
       methods: {
         handleClose(param) {
          // do something
        },
       }
     }
   

   子组件：

     export default{
       data() {
        return {
          getData: this.faToSon // 获取父组件传递过来的值
        }
       },
            ...  ...
       props: ['faToSon'],
            ...  ...
       methods: {
             useFathersFunction() {
              this.$emit('closeForm',param) // 调用父组件传递过来的方法
          }
       }
     }

2. 父组件使用子组件的值或方法

   父组件：

   <comp-form ref= "sonComp"> </comp-form>
    
   <script>
     import SonCom from '......'
     export default{
       ...  ...
       components: {
        SonCom,
       }
       methods: {
         useSonsFunction() {
          this.$refs.sonComp.sonsFunction(param); // 调用子组件的方法
          this.$refs.sonComp.son; // 获取子组件data里面的值
          //（子组件还可以通过向父组件传值，让父组件得到子组件的值）
        },
       }
     }
    </script>
   

   子组件：

   export default{
     data() {
       return {
        son: {}
       }
     }
    ...  ...
     methods: {
       sonsFunction(param) {
        // do somthing
       }
     }
   }

子组件的data与父组件传递过来的props保持同步（伪双向绑定）

废话不多说，直接贴代码。
子组件：

  export default{
    data() {
     return {
       getData: this.faToSon // 获取父组件传递过来的值
     }
    },
         ...  ...
    watch: {
         // ..........监听父组件props的变化
         faToSon: {
           handler(newval, oldval) {
             // do something
           },
           // ..........由于监听的方式是通过比较内存地址是否变化，
           // ..........而对象内部属性的改变并不会引起对象内存地址的改变
           // ..........因而设置deep:true进行深度观察
           deep: true
         }
     },
    props: ['faToSon'],
         ...  ...
  }

目前才刚开始学习Vue三天左右，以上问题都是经过百度并实践成功了的，纯手打.......