vue3组件传值

1.父向子传值

父组件

引入子组件

import Son from './components/Son.vue'

设置响应式数据

const num = ref(99)

绑定到子组件

 <Son :num="num"></Son>

子组件

引入defineProps

import { defineProps } from 'vue';

生成实例接收数据

type设置接收类型，可以是数组形式，接收多种类型

default设置默认值

const prop = defineProps({
  num: {
    type: Number,
    default: 18
  }
})

--------------------------------------------------------------------------------------------------------------------------

2.子向父传值

子组件

引入defineEmits

import { defineEmits } from 'vue';

 生成实例，函数内参数可以不写，参数为要抛出的事件名

const emit = defineEmits(['doMessage'])

设置点击按钮

   <button @click="doClick">
        San组件按钮
   </button>

定义事件函数-使用实例emit抛出事件和值

const doClick = () => {
  emit('doMessage', '我是son里的数据')
}

父组件

子组件标签接收抛出事件

  <Son @doMessage="doMessage"></Son>

定义执行函数--函数的形参接收子组件抛出的值

const doMessage = (e) => {
  console.log(e);
}

--------------------------------------------------------------------------------------------------------------------------

3.后代组件传值

祖先组件

app.vue组件引入

import { ref, provide } from "vue";

设置响应数据和注入数据

const num = ref(999)
provide('appNum', num)

后代组件

后代组件引入

import { inject } from 'vue';

使用变量接收

const appNum = inject('appNum')

One.vue和Two.vue就可以接收祖先组件里的数据

--------------------------------------------------------------------------------------------------------------------------

祖先组件

app.vue组件引入

import { provide } from "vue";

定义函数

const appFn = (e) => {
  console.log('appFn祖先', e);
}

并向后代组件传递函数

provide('appFn', appFn)

后代组件

引入函数

import { inject } from 'vue';

接收组件传递的函数

const appFn = inject('appFn')

设置按钮，注册点击事件，执行函数使用祖先传递的函数

 <button @click="appFn"></button>

函数被执行

 点击时执行函数传递参数

 <button @click="appFn('Two组件触发的祖先函数')">按钮</button>

祖先组件成功接收参数