vue2的传参合集

1.基础的父对子props传参就不说了

2.使用内置的<component />组件传递动态组件

 

 

 3.子组件传参到父组件

 

 

 建议使用kebab-case的事件名

4.深层次的传参(使用provide/inject)

（1）首先在孙组件中通过inject定义需要传入的参数

export default defineComponent({
  inject:{       //inject也可直接为一个数组['name']
    name:{
      default:'名称'
    },
    info:{
      default:()=>({
        age:18,
        sex:'1'
      })
    }
  }
}

（2）在祖父组件中通过provide传入参数

export default defineComponent({
  name: "Index",
  provide: () => ({
    name: "mara",
    info:{
      age:33,
      sex:0
    }
  })
}

(3)在setup中使用provide

import { provide, ref } from 'vue';
setup() {
  // 使用 ref 提供响应性
  const name = ref('Wise.Wrong');
  // provide 可以定义两个参数，分别为 key 和 value
  provide('name', name.value);
}

import { inject } from 'vue';
setup() {
  // inject 接收两个参数，分别为 key 和默认值，默认值可以为空
  const author = inject('name', '这里是默认值');
  return { name };
}