Vue3中的 defineEmits/defineProps

defineEmits：子传父方法

defineProps：父传子属性值

一、defineEmits用法：

已知：父组件中绑定了两个兄弟组件

要求：点击其中的兄弟组件1以后，兄弟组件2获取兄弟组件1中所点击的id

子组件

   <div
                v-for="(item, index) in Section"
                :key="index"
                :class="`content_strap ${index % 2 == 1 ? 'light' : 'dark'}`"
                @click="
                    changeTitle(
                        item.roadname + '路段24小时拥堵指数趋势',
                        item.roadId
                    )  //子组件中点击获取当前点击的名称和id ，并将此传递给父组件，继而传递给兄弟组件
                "
 >

<script lang="ts" setup>

const emit = defineEmits< {(e: 'change-title', name: string, roadId: string): void >()  //父组件用于监听

function changeTitle(title: string, roadId: string) { //当前点击获取

    console.log('sss');

    emit('change-title', title, roadId);

}

</script>

父组件

<div>    

//兄弟组件1

<KeyList
            v-if="bezelTitle == '重点路段'"
            @change-title="changeTitle" //点击触发子组件中的方法和值
></KeyList> 

//兄弟组件2
 <IndexSection
            v-if="bezelTitle.includes('路段24小时拥堵指数趋势')"
            :uid="roleid"  //将兄弟组件当前点击的id传参进自己组件
  ></IndexSection>

</div>

<script lang="ts" setup>

function changeTitle(title: string, roadId: string) {

//拿到子组件中的title和roleid 并赋值给当前页面

    bezelTitle.value = title;  //父组件中的bezelTitle =子组件中的title值

    roleid.value = roadId;  //父组件中的roleid = 子组件中的roadId

}

</script>

二、defineProps

上述在父组件中拿到了从兄弟组件1的当前点击id,并在兄弟组件2中当作参数引入进来了

此时需求变为父子传值（父组件拿到了兄弟组件2需要的参数）

兄弟组件2 只需将从父组件传过来的uid参数引入进来即可，此时用到了props

//兄弟组件2-div部分

 <IndexSection
            v-if="bezelTitle.includes('路段24小时拥堵指数趋势')"
            :uid="roleid"  //将兄弟组件当前点击的id传参进自己组件
  ></IndexSection>

<script lang="ts" setup>

const props = defineProps({

    uid: {

        type: String,

        required: true,//是否必要传值

    },

});

const { uid } = toRefs(props);

</script>

拿到了在页面中引入了以后直接在页面中使用就可以了