父组件定义:
let money=ref(10000)
<child info="我是父组件" :money="money"></child>
子组件使用:
<script setup lang="ts">
let props=defineProps(['info','money'])
</script>
<el-input type="text" :model-value="props.money" style="width: 200px"></el-input>
<el-input type="text" :model-value="props.info" style="width: 200px"></el-input>
<el-input type="text" :model-value="money" style="width: 200px"></el-input>
<el-input type="text" :model-value="info" style="width: 200px"></el-input>
效果如下:
父组件中方法定义:
<child info="我是父组件" :money="money" @childHandle="parentHandle"></child>
const parentHandle = (param1, param2) => {
console.log(param1, param2)
}
子组件中方法定义和使用:
<button @click="handleClick" style="margin-top: 50px">点击</button>
<button @click="events('childHandle','Jack','Lucy')" >点击2</button>
let events = defineEmits(['childHandle'])
const handleClick = () => {
events('childHandle', 'AK47', 'M4A1')
}
效果如下:
父组件实现如下:
<child ref="childComponent" @click="parentHandle2"></child>
const childComponent=ref()
const parentHandle2 = () => {
childComponent.value.play()
}
子组件实现如下:
const play = () => {
alert('你调用了子组件的方法')
}
defineExpose({
play
})
实际效果:
父组件:
let params = ref('abc')
provide('Token',params)
子或者孙组件:
let son=inject('Token')
console.log(son.value)
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。