如何在vue3中侦听父组件中的事件
如何在vue3中侦听父组件中的事件
提问于 2020-12-24 05:56:24
我想将事件从子注释传递给父级。我在vue2中也做了同样的事情，但我不知道如何在vue3中做到这一点。
这是子组件设置方法。
setup(props, { emit }) {
const router = useRouter();
const form = ref(
{
email: "ajay@gmail.com",
password: "123456789",
isLoading: false,
},
);
const user = ref("");
const error = ref("");
function login() {
User.login(this.form).then(() => {
emit('login', true);
// this.$root.$emit("login", true); -- vue2
localStorage.setItem("auth", "true");
router.push('/dashboard');
})
.catch(error => {});
}
return { form, login, user, error};
}从这里发出登录方法，我希望在父注释中侦听。
这是父组件，emit.on方法不在这里工作。
setup(props, { emit }) {
const router = useRouter();
const state = reactive({
isLoggedIn: false,
});
onMounted(async () => {
emit.on("login", () => { // `vue2` this.$root.$on("login"`
this.isLoggedIn = true;
});
});回答 1
Stack Overflow用户
发布于 2020-12-24 07:49:34
在父组件中，应该为发出的事件添加一个处理程序：
<child @login="onLogin"></child> setup(props, { emit }) {
const router = useRouter();
const state = reactive({
isLoggedIn: false,
});
function onLogin(){
state.isLoggedIn=true,
}
return{state,onLogin}
} 或者在单独的文件中创建一个名为useAuth的可组合函数：
import {reactive} from 'vue'
const state = reactive({
isLoggedIn: false,
});
const useAuth=()=>{
function onLogin(){
state.isLogged=true;
}
return {state,onLogin}
}
export default useAuth();然后导入两个组件中的函数：
儿童：
import useAuth from './useAuth'
....
setup(props, { emit }) {
const router = useRouter();
const {useAuth} =useAuth();
....
function login() {
User.login(this.form).then(() => {
onLogin() //will call the nested function that set loggedIn to true
localStorage.setItem("auth", "true");
router.push('/dashboard');
})
.catch(error => {});
}在父母中：
import useAuth from './useAuth'
....
setup(props, { emit }) {
const router = useRouter();
const {state} =useAuth();
//it replaces your local state 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65434526
复制相关文章
相似问题
腾讯云开发者
