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>
祖先组件成功接收参数