Modify the value of the props property directly

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

Or the parent component modifies property values in the props of the child component

Avoid directly changing prop, as this value is overwritten every time the parent component is rerendered. You should use data-based data or computed attributes.

Workaround: accept the props property value in data

If a setter is not defined for a calculated property, modifying the value of the calculated property directly will result in an error

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

Solution: Define an empty setter, but that won’t change the value of the calculated property, just to prevent errors. If you try to change the value of the calculated property, you’re writing something wrong

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

Common vUE techniques

Vue listens for the native event of the root element in the component, using the.native modifier

Note: is the root element of the component

Props transfer function

There are a few things you can do before $emit

props: {
    // Close the front callback, return false, which terminates intra-component closure
    beforeClose: {
      type: Function.default: () = > {
        return true}}}For example, you can do something before $emit
  goBack() {
      // This allows the child to change the parent's state
      // Change the data passed in by the parent component to false when hit return
      if (this.beforeClose()) {
       // Do something like close the popbox
      }
      this.$emit('goBack')}Copy the code

It can also be written as a callback and called within a component

$attrs will only have props properties that are not registered to simplify the pass-through of parent and grandson components

< child2 v $attrs - bind = "" > < / child2 >Copy the code

Vue-router’s beforeEach hook loops endlessly causing blank pages