昆山网站,做电影网站危险吗,百度云建站,wordpress精简化教程vue2写法:
中父组件调用子组件:
child :isShow.syncisShow v-showisShow/
子组件想要消失, 在子组件写:
this.$emit(update:isShow,false);
具体代码就不粘贴了 vue3写法:
父组件核心代码:
v-model:axxx
子组…vue2写法:
中父组件调用子组件:
child :isShow.syncisShow v-showisShow/
子组件想要消失, 在子组件写:
this.$emit(update:isShow,false);
具体代码就不粘贴了 vue3写法:
父组件核心代码:
v-model:axxx
子组件核心代码:
defineProps({ a: 数据类型, // 父页面传递的数据 });
interface IEmits { (e: update:a, arg1: 数据类型): void; }
const emits defineEmitsIEmits();
调用父组件的方法: emits(update:isShow, false);
使用示例:
注意: v-model:isShowisShow 如果拆开写就是 update:isShowbolisShowbol :isShowisShow
父组件代码如下:
script setup
import { ref, defineAsyncComponent } from vue// 异步组件
const ChildA defineAsyncComponent(() import(./components/Test.vue));const isShow ref(false);
const show () {isShow.value true
}
/scripttemplateinput typebutton value我是父组件中的按钮, 让子组件出现 clickshow!-- v-model:isShowisShow update:isShowbolisShowbol :isShowisShow --ChildA v-model:isShowisShow /
/templatestyle scoped
/style
子组件逻辑:
因为 v-model:isShowisShow 如果拆开写就是 update:isShowbolisShowbol :isShowisShow
所以:
defineProps({ isShow: Boolean });
const hide () { emits(update:isShow, false); }
子组件代码如下:
script setup langts
import { defineProps } from vue;
// 父组件传数据 v-model:isShowisShow
// v-model:isShowisShow update:isShowbolisShowbol :isShowisShow
defineProps({isShow: Boolean
});interface IEmits {(e: update:isShow, arg1: Boolean): void;
}
const emits defineEmitsIEmits();const hide () { // 因为父页面传过来的方法相当于是bolisShowbol, 所以传false就会消失emits(update:isShow, false);
}
/scripttemplatediv v-showisShowbutton clickhide我是子组件,点我消失/button/div
/templatestyle scoped
button {margin: 10px;
}
/style
