父组件访问子组件的方法或参数 (子组件暴漏出方法defineExpose)

简介: 父组件访问子组件的方法或参数 (子组件暴漏出方法defineExpose)

父组件

<template>
    <div> 
          <Menu ref="menus"  @onclick3="getList3"/>   
          
    </div>
</template>

<script setup lang="ts">
import {reactive ,ref}  from 'vue'  
const  menus=ref(null)  //const的名字要和ref定义的一致
interface jianc{
    title:string
}
const getList3=()=>{ 
//拿的ref子组件下的参数list [6,6,6,6] //
    console.log(menus.value.list.map(v=>v))

}

</script>

<style scoped>

</style>

子组件 (子组件emit提交一个自定义事件 父组件触发之后 拿到ref子组件下的参数list[6,6,6,6])

<template>
   <div class="">
      <button @click="clickTap3">派发3</button>
   </div> 
</template>

<script setup lang="ts">
import  {reactive,  defineEmits, defineExpose}  from 'vue';

const list=reactive<number[]>([6,6,6,6])//number类型的数组值为[6,6,6,6]
const emit=defineEmits(['onclick3']);
const onclick3=()=>{
    emit('onclick3')
}
// 子组件派出去([6,6,6,6]) 父组件拿
defineExpose({
    list
})
</script>

<style scoped>
.menu{
    width: 100px;text-align: center;
    border: 1px solid #000;
    height: 100vh;
}
</style>
相关文章
|
6月前
有关子组件修改父组件传值报错问题
有关子组件修改父组件传值报错问题
42 0
|
11月前
|
小程序 前端开发 JavaScript
微信小程序(二十二)子组件调用父组件方法,父组件调用子组件方法
制作了一个自定义组件,底部弹出菜单。 显示这个菜单的时候,首先,父组件需要调用子组件的方法,显示子组件。 点击子组件的菜单,需要调用父组件的方法进行逻辑处理。
294 0
|
6月前
|
JavaScript
在父组件中使用子组件时,如何保证子组件的实例在父组件的生命周期中得到正确的更新?
在父组件中使用子组件时,如何保证子组件的实例在父组件的生命周期中得到正确的更新?
33 2
|
6月前
|
JavaScript
Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用
Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用
Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用
|
5月前
|
JavaScript
子组件向父组件传参的方式?
子组件向父组件传参的方式?
91 0
|
6月前
|
前端开发 JavaScript 开发者
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件(二)
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件
77 0
|
6月前
|
小程序
子组件调用父组件的方法并传递数据
子组件调用父组件的方法并传递数据
|
JavaScript
Vue 在父(子)组件引用其子(父)组件方法和属性
Vue 在父(子)组件引用其子(父)组件方法和属性
238 0
|
JavaScript
Vue组件使用(父组件监听子组件数据变化,子组件使用父组件的数据,并监听父组件的数据变化)
Vue组件使用(父组件监听子组件数据变化,子组件使用父组件的数据,并监听父组件的数据变化)
487 0