vue2.x常见问题记录

直接修改props属性的值

  props:{
   msg:String
  },
  methods: {
    add() {
      this.msg = '11111'
    }
  }

或者父组件修改子组件的props里面的属性值

避免直接更改prop，因为每当父组件重新渲染时，该值都会被覆盖。应该使用基于data的数据或计算属性。

解决办法：在data中承接props属性值

如果计算属性没有定义setter，直接修改计算属性的值会报错

computed: {
    closure: {
      get() {
        return 'abc'
      }
    },
    handelMsg() {
      return this.msg
    }
  },
  methods: {
    add() {
      this.closure = 'defg'
    }
  }

解决办法：定义一个空的setter，但这样也是无法修改计算属性值的，只能防止不报错，如果你想试图修改计算属性的值，那说明你的写法有问题

computed: {
    closure: {
      get() {
        return 'abc'
      },
      set(value) {}
    }
  },
  methods: {
    add() {
      this.closure = 'defg'
    }
  }

vue常用技巧

vue在组件中监听根元素的原生事件，可以使用 .native 修饰符

注意：是组件的根元素

props传递函数

在$emit之前可以做一些事情

props: {
    //关闭前回调，return false，则会终止组件内关闭
    beforeClose: {
      type: Function,
      default: () => {
        return true
      }
    }
  }
   //比如在$emit之前可以做一些事情
  goBack() {
      // 这种写法可以让子组件改变父组件的状态
      // 点击返回时 让外面传过来的数据变为false 也就是改变了父组件传入的数据
      if (this.beforeClose()) {
       //做一些事情 比如关闭弹框
      }
      this.$emit('goBack')
  }

也可以写成回调，在组件中调用

$attrs里面只会有props没有注册的属性 可以简化父组件和孙子组件的传值 A-B-C B组件

 <child2 v-bind=”$attrs”></child2>

vue-router的beforeEach钩子无限循环导致页面空白问题详解