vue3 父子传值

 公共组件自定义封装,注册使用,与项目模块有区别,可以在在不同模块,项目中拿过来直接用,

1 父传子

父组件:
<div class="home-banner">
    <XtxCarousel :sliders="sliders" />
  </div>

子组件:
export default {
  name: 'XtxCarousel',
  props: {
    sliders: {
      type: Array,
      default: () => [],
    }
  },
  setup(props) {
    console.log(prop.sliders,"自定义插件传值,父=>子");
    //默认显示的图片的索引
    const index = ref(0);
    return { index }
  },
}

2 子传父

子组件:

setup(props, {emit}) { //setup 参数 {prop,emit}
    //默认显示的图片的索引
    const index = ref(0);
    emit('choseMe','111222333'); //事件名,参数
    return { index }
  },

父组件:

<template>
  <XtxCarousel :sliders="sliders" @choseMe="sonToFather"/>
</template>



setup() {
    const sonToFather = (vel) => {
      console.log(vel); //操做
    };
    const sliders = ref([]);
    findBrand().then(res => {
      if(res.code == '200' & res.result) {
        sliders.value = res.result;
      }
    })
    return { sliders,sonToFather }
  }