Vue 组件之间的通信

1、父传子 props

父组件 ==》 <Children :dataInfo="dataInfo" /> 

子组件

普通 ==》 props: ["dataInfo"]

严谨给默认值 ==》
props: {

dataInfo: {

   type: Object,

   default: () => {}
}

动态传值 wacth监听 ==》

在子组件中用watch()监听值的改变，不同的类型的要用不同的监听方法 数组、对象深度监听

watch: {

  string:(newValue,oldValue){ // 一般监听
    console.warn(newValue)
  }

      dataInfo:{  // 深度监听

        handler(newValue, oldValue){

          console.warn(newValue)

        },

        deep: true

      },

    },

2、在父组件中用ref="str" 来声明组件，然后通过this.$refs.str.method()在值改变的地方来调用子组件中的方法

父组件 ==》 <Children ref="children" />

methods: {
  refresh() {
    this.$nextTick(()=> { // 这种方法数据解决不能够及时渲染
       this.$refs.children.init(val)
    })
  }
}

子组件 ==》

methods: {
   init(val) {
       this.$refs.children.init(val)
   }
}

3、子向父组件传值 $emit

字组件 ==》

methods: {

    handleClick(val) {

      this.$emit("handleClick", val)

    }

}

父组件 ==》

<Children @handleClick="childrenClick" />

methods: {

    childrenClick(val) {

      console.log(val,'调用子组件的方法传值')

    }

}

4、vuex 通信

https://blog.csdn.net/c153284575/article/details/103700628

5、event bus通信

https://blog.csdn.net/c153284575/article/details/103700069

6、SessionStorage通信

https://blog.csdn.net/c153284575/article/details/103713192