vue3传值

奶嘴~

已于 2022-12-14 10:43:50 修改

阅读量109

点赞数

文章标签： javascript 前端 vue.js

于 2022-12-14 10:32:34 首次发布

本文链接：https://blog.csdn.net/weixin_45528167/article/details/128312344

版权

vue3传值

父调子

//父组件
<template>
 <TableSwitch
      ref="tableSwitch"
      title="入侵报警"
      :table-switch-list="typeList"
      @handleClick="handleClick"
    />
</template>
<script setup name="father">
import { ref } from 'vue'	
const tableSwitch = ref(null)
const handleClick = ()=> {}
const fun = () =>{ //调用子组件方法或属性
	tableSwitch.value.switchClick()
}
</script>
//子组件
<template>
	 <div
    	@click="switchClick(item, index)">
    </div>
</template>
<script setup name="TableSwitch">
import { ref, defineExpose, defineEmits} from 'vue'
const emit = defineEmits(['handleClick'])
const switchClick = () => {
//调用父组件方法
  emit('handleClick', item)
}
defineExpose({ //暴露子组件方法或属性
  switchClick
})