组件通信

父子通信

1.传统props emit

vue2.0

 //父传子
 <add-departments
      :showadddept="showAddDept"
      @close-dia="closeDia"
    />

  //子传父
  props: {
    showadddept: {
      type: Boolean,
      default: false
    }
  }
  
 closeDia () {
      this.$emit('close-dia')
 },

vue3.0

 //父传子
 <add-departments
      ref="addDep"
      :depslist="depsList"
      :showadddept="showAddDept"
      @close-dia="closeDia"
    />

  //子传父
  props: {
    showadddept: {
      type: Boolean,
      default: false
    }
  }
  
  emits:['close-dia']
  
 closeDia () {
      this.$emit('close-dia')
 },

区别:vue3.0添加了emits

2.v-model

vue2.0

//父传子
 <Field v-model="formData.isAgree">
            <span>我已同意</span>
 </Field>

//子传父
  props: {
    value: { 
      type: Boolean,
      default: false
    }
  },
  
  setup (props, { emit }) {
  
    const changeChecked = () => {
      emit('input', checked.value)
    }
  }

vue3.0

//父传子
 <Field as="XtxCheckBox" name="isAgree" v-model="formData.isAgree">
            <span>我已同意</span>
 </Field>

//子传父
  props: {
    // vue3.0 v-model用法 （不支持.sync修饰符）
    // 父组件：传递
    // <XtxCheckBox v-model="sel" v-model:meng="goods"> 选择 </XtxCheckBox>
    // 子组件：接收多个v-model值
    // 默认
    modelValue: { // 更新使用 => emit('update:modelValue', newVal)
      type: Boolean,
      default: false
    },
    // 其它
    meng: Object // 更新使用=》emit('update:meng', newVal)
  },
  
  emits:['update:modelValue','change'],
  
  setup (props, { emit }) {
    const changeChecked = () => {
 
      emit('update:modelValue', checked.value)
      // 传递状态
      emit('change', checked.value)
    }
  }

3.$ parent $children

区别 2.0 sync update

3.0v-model

1.v-model语法糖绑定组件vue3.0 父子通信双向

父传子

一个情况下v-mode

v-model='name'

props modelValue

事件 update:modelValue

多个v-model-

v-model:绑定名字="变量"

props 绑定名字:{}

事件 update:绑定名字

vue2.0的sync和v-model合并了

vue3.0没有.sync

同级通信

vuex通信

vuex 是 vue 的状态管理器，存储的数据是响应式的。但是并不会保存起来，刷新之后就回到了初始状态，具体做法应该在vuex里数据改变的时候把数据拷贝一份保存到localStorage里面，刷新之后，如果localStorage里有保存的数据，取出来再替换store里的state。

跨级通信

1.依赖注入

父

provide('变量名',注入变量)

子代

const 变量 = inject('变量名')

2.vuex

特殊

路由通信

router可以加 params和query参数

$refs可以拿到组件实例