vue3.0中 在子组件中触发父组件中的函数
新手学习:vue3.0中 在子组件中触发父组件中的函数的技巧目前有两个:技巧一:在script中引入 defineEmit 后,import{ defineEmit }from'vue' ;通过defineEmit定义事件,例如:constemit=defineEmit(['myclick']); 定义了 myclick 事件,并且返回了一个函数,在点击事件里通过emit("myclick") 传
·
新手学习:
vue3.0中 在子组件中触发父组件中的函数的技巧目前有两个:
技巧一:在script中引入 defineEmit 后,import { defineEmit } from 'vue' ;通过defineEmit定义事件,例如:const emit = defineEmit(['myclick']); 定义了 myclick 事件,并且返回了一个函数,在点击事件里通过emit("myclick") 传递出事件,在父组件中的 引用的子组件的标签上定义上要传递的事件,具体代码如下:
子组件:
<template>
<h1>{{ msg }}</h1>
<com></com>
<button @click="emitclick">emitclick</button>
</template>
<script setup>
// 1,直接导入组件
import com from "./com.vue";
import { defineProps, reactive, defineEmit, useContext } from 'vue'
// 4,定义事件
const emit = defineEmit(['myclick']);
const emitclick = () => {
emit('myclick');
}
</script>
<style scoped> </style>
父组件:
<template>
<HelloWorld msg="Hello Vue 3 + Vite" @myclick="onmyclick"/>
</template>
<script setup>
import HelloWorld from './components/HelloWorld.vue';
const onmyclick = () => {
console.log("子组件helloword让我显示的");
}
</script>
<style>
</style>
技巧二:先获取上下文对象,通过该对象的emit()方法进行事件的传出,其他同上;
子组件:
<template>
<button @click="emitclick">emitclick</button>
</template>
<script setup>
import { defineProps, reactive, defineEmit, useContext } from 'vue'
//3, 获取上下文
const ctx = useContext();
const emitclick = () => {
ctx.emit('myclick');
}
</script>
<style scoped>
</style>
父组件:
<template>
<HelloWorld msg="Hello Vue 3 + Vite" @myclick="onmyclick"/>
</template>
<script setup>
import HelloWorld from './components/HelloWorld.vue';
const onmyclick = () => {
console.log("子组件helloword让我显示的");
}
</script>
<style> </style>
更多推荐
已为社区贡献19条内容
所有评论(0)