vue3 父子组件间相互传值方式
vue3父子组件相互传值
父向子传值
父
子
export default {
props:[‘pieData’],
setup(props,ctx) {
const pie_data = props.pieData
子组件中需要在props中声明需要接收的变量名,setup中需要引用props,赋值时用props.变量名接收。return出去就可以用了
子组件向父组件传值
父
const e_flag = ref(false);
const get_e_flag = (e) => {
e_flag.value = e;
};
父组件需要声明一个@方法get_e_flag接收子组件发送的值,在该方法中赋值给需要的变量
子
setup(props, ctx) {
……
const spyder_go = () => {
ctx.emit(‘e_flag’,e_flag.value)
子组件中需要在setup中使用ctx,使用ctx.emit向父组件传值。该方法需要调用,比如点击或者onMounted