一、父子组件

方式1

Vue3

 父 ——> 子     props传递参数；       

子 ——> 父     emit方法传递数据 

父组件：

<template>
  <div>  
    <child :propsName="propsData" @vote="voteId"></child>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import child from '@/components/child';
let propsData = ref({ id: 25, name: 'Jack', age: 18})

const voteId = (id) => {
  console.log('子组件传递的参数id为：'+id);
}
</script>

子组件

<template>
  <div>
    <div @click="vote(propsData.id)">{{ propsData.name }}</div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
defineProps({
  count: {
    propsData: Obiect,
    default: () => {}
  }
})
const emits = defineEmits(['vote'])
const vote = (id) => {
  emits('vote', id)
}
</script>

Vue2

父 ——> 子     props传递参数；       

子 ——> 父     emit方法传递数据 

父组件：

<template>
    <div>  
        <child :propsName="propsData" @vote="voteId"></child>
    </div>
</template>

<script>
    import child from '@/components/child';
    export default {
      name: 'detail',
      data () {
         return {
            propsData: { id: 25, name: 'Jack', age: 18}
        }
      }
    },
    methods:{
        voteId(id){
            console.log('子组件传递的参数id为：'+id);
        }
    },
    components:{
        child 
    }
</script>

子组件：

<template>
    <div>
        <div @click="vote(propsData.id)">{{ propsData.name }}</div>
    </div>
</template>

<script>
export default {
  name: "child",
  //props:['propsData'], //不验证数据类型
  props:{      //添加验证，例如必须传入对象
    propsData:{
      type: Obiect,
      default: {}
    }
  },
  methods:{
    vote(id){
      this.$emit('vote', id);
    }
  }
}
</script>

方式二

父 ——> 子     $ref.Child，可操作子组件数据、调用子组件方法

子 ——> 父     $parent，可操作父组件数据、调用子组件方法

二、祖孙组件

当组件层级超过一层时，如果使用props或者$parent的方式会导致一层一层传递，代码较多。

vue高阶组件提供了provide/inject方法，可以跨组件层级传递。

参考文档：Provide / Inject | Vue.js

vue3

祖组件：

<script setup lang="ts">
import { ref, provide } from 'vue'

// provide
// 导出变量
const list = ref(['chinese'])
provide('list', list.value)

// 导出方法
const changeList = () => {
  list.value.push('math')
}
provide('changeList', changeList)
</script>

孙组件：

<script setup lang="ts">
import { inject } from 'vue'

// inject
// 获取变量
const list = inject('list') as any

// 获取方法
const changeList = inject('changeList') as any
// 调用方法
changeList()
</script>

三、公共组件、兄弟组件

vuex、pinia