vue使用心得记录

父组件与子组件之间传递数据的方法

这里介绍一些非常规的(骚)操作，不推荐使用，但是用了之后会很爽。
1.使用$ref
当父组件中为子组件声明了ref属性时，父组件可以通过this.$refs.<子组件ref名称>来获取子组件中声明的任何变量，还可以调用子组件中声明的函数。
但是这种方式比较粗暴，因为父组件可以通过这种方式获取到子组件中几乎所有的信息，当父组件对这些信息滥用时，会对程序产生一些不可控的问题
举例：

<template>
  <p>子组件</p>
</template>
<script>
  export default {
    name: 'child',
    data() {
      return {
        test: 1,
      }
    },
    methods: {
      testMethod() {
        console.log('testMethod has been called.')
      }
    },
  }
</script>

<!--父组件-->
<template>
  <p>父组件</p>
  <child ref="childRef"></child>
</template>
<script>
  import './child'

  export default {
    name: 'parent',
    data() {
      return {
      }
    },
    methods: {
      call() {
        //get
        let test = this.$refs.childRef.test
        console.log("child test value:" + test)
        //set
        this.$refs.childRef.test = 2
        console.log("child test value:" + this.$refs.childRef.test)
        //调用子组件方法方法
        this.$refs.childRef.testMethod()
      }
    },
  }
</script>

2.在props中双向绑定
这种方式，父组件给子组件的属性传参时，子组件中可以不用在props中声明，但是仍然可以使用相关属性的方式，比如一些公共的组件，或者中间组件。
举例：

<template>
  <p>子组件</p>
</template>
<script>
  export default {
    name: 'child',
    mouted() {
      console.log('attrs',this.$attrs)
      console.log('listener',this.$listener)
      this.$emit('testChange')
    },
    data() {
      return {
      }
    },
  }
</script>

<!--父组件-->
<template>
  <p>父组件</p>
  <child ref="childRef" :test.sync="1" :test2.sync="2" :test.sync="3" @testChange="testChange"></child>
</template>
<script>
  import './child'

  export default {
    name: 'parent',
    data() {
      return {
      }
    },
    methods: {
      testChange() {
        console.log('testChange')
      }
    },
  }
</script>

可以在控制台中的日志里看到，父组件中传递的数值，全都可以在$attrs中找到，而声明的回调，可以在$listeners中找到，而且$listeners中还自动包含了.sync声明的属性的update事件。子组件几乎可以向使用普通props一样使用$attrs中的各种属性，当需要更新时使用this.$emit('update:<props名称>')，回调时使用this.$emit('testChange')。

computed与watch的使用

watch和computed中声明方式:

watch:{
  watchAttr1: {
    handler: function (newVal,oldVal) {
      console.log(newVal)
    },
    deep:true,
    immediate: true,
  },
  watchAttr2(newVal,oldVal) {
    console.log(newVal)
  },
},
computed:{
  computedAttrs: {
    get() {
      return 'test'
    },
    set(val) {
      //对参与计算的属性，重新给这些属性赋值，内部双向绑定
    },
    cache: false, //是否缓存
  },
  computedAttrs2() {
    return 'test'
  },
},

参考链接
浅谈Vue中计算属性computed的实现原理
vue官方文档
Vue中的computed属性
vm.$attrs 【Vue 2.4.0新增inheritAttrs，attrs详解】
vue的props和$attrs